Textarea doesn't get focus when bootstrap modal is opened

Question

http://jsfiddle.net/h3WDq/1921/

I can't type in textarea, when the modal is opened.

Textarea is not in modal and has absolute positioning with large z-index.

<textarea style='position:absolute;z-index:200000'></textarea>

Can anyone override this problem?

Possible duplicate of [Twitter Bootstrap modal blocks text input field](http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field) — Gershon Papi, Mar 10 '17 at 07:21
It looks like Boostrap has some `enforceFocus` code blocking you. See my answer below. — prograhammer, Mar 10 '17 at 07:36

score 2 · Answer 1 · answered Mar 10 '17 at 07:19

2

Remove tabindex="-1" from <div id="myModal1" class="modal hide" tabindex="-1" role="dialog"> and will work. Don't understand why tabindex is creating this problem.

answered Mar 10 '17 at 07:19

AG_

2,589
3
20
32

If I delete tabindex, would it cause problems? – Sonya Seyrios Mar 10 '17 at 07:39
`tabindex` is use to set focus order when you press tab through keyboard. you can find more details here http://stackoverflow.com/questions/32911355/whats-the-tabindex-1-in-bootstrap-for – AG_ Mar 10 '17 at 07:48
So, I shoudn't delete it – Sonya Seyrios Mar 10 '17 at 07:50
documentation says `tabindex="-1"` is used to make modal disappear when user press `esc` key, so its up to you. – AG_ Mar 10 '17 at 07:56

prograhammer · Accepted Answer · 2017-03-10T07:57:19.110

2

It looks this line of code is the problem where Bootstrap enforces focus each time you show the modal. So let's remove the event each time:

$('#myModal1').on('shown.bs.modal', function (e) {
  $(document).off('focusin.modal');
})

See fiddle.

edited Mar 10 '17 at 07:57

answered Mar 10 '17 at 07:27

prograhammer

20,132
13
91
118

I added this piece of code in DOMready in my code, it doesn't fix. However in my Fiddle it worked, yes – Sonya Seyrios Mar 10 '17 at 07:40
Could you help? – Sonya Seyrios Mar 10 '17 at 07:41
Alright, let me update my answer to address the enforce focus directly... – prograhammer Mar 10 '17 at 07:45
Hold on, that's not doing the trick. Trying another approach. Maybe we can kill that event altogether... – prograhammer Mar 10 '17 at 07:50
Your code works in Fiddle, but for my code it gives nothing) – Sonya Seyrios Mar 10 '17 at 07:52
Ok see updated answer/fiddle once more. Make sure the selector is right for your modal `#myModal1`. We'll just kill that handler. – prograhammer Mar 10 '17 at 07:55
What did you change? I'm using $('.modal') for all modals – Sonya Seyrios Mar 10 '17 at 07:56
Good job! Thanks! – Sonya Seyrios Mar 10 '17 at 07:57
Woohoo! Glad I could help! – prograhammer Mar 10 '17 at 07:57

score 1 · Answer 3 · answered May 27 '21 at 17:09

In case anyone is using Bootstrap Vue and seeing this same issue:

Bootstrap Vue provides a b-modal property named "ignore-enforce-focus-selector". You can use this property to provide a selector (including a comma-separated selector list) that specifies elements that can be focused even while the modal is visible. In my case, I had a number of textarea elements that needed to be focusable while the modal was visible. Setting "ignore-enforce-focus-selector" to "textarea" made it possible to edit these textareas while the modal was visible.

See https://bootstrap-vue.org/docs/components/modal#keyboard-navigation

score 0 · Answer 4 · answered Mar 10 '17 at 07:11

0

<textarea style='position:absolute;z-index:200000' autofocus></textarea>

answered Mar 10 '17 at 07:11

Aravind

40,391
16
91
110

Did you check it in my Fiddle? Your answer has no sense and doesn't work. – Sonya Seyrios Mar 10 '17 at 07:13
While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – g00glen00b Mar 10 '17 at 07:43
Its because I posted answer from mobile app, screen size is limited. Will keep in mind in future. – Aravind Mar 10 '17 at 09:12
@SonyaSeyrios this answer helped you ? – Aravind Mar 10 '17 at 09:21

Textarea doesn't get focus when bootstrap modal is opened

4 Answers4