Input field in a popover within a modal is not focusable

[lcsqlpete]

I have a popover with an input field that is within a modal. When the popover is displayed, it is not possible to type anything into the popover input field and the first field in the modal is highlighted instead of the popover input field.

I found a stack overflow post regarding this issue which fixed the problem by removing tabindex=-1 from the modal, which I did, and that appeared to fix the problem.

However, the stack overflow solution was using a beta version of Bootstrap 5, 5.0.0-beta1 and when I use my current version, 5.1.3, the problem returns.

I am on OSX 10.15.7 Bootstrap version 5.1.3 and using Chrome version 103.0.5060.53.

My code is in the attached zip file

modal_popover.html.zip

[julien-deramond]

Thanks for reporting this issue @lcsqlpete.
Could you please try to embed your example in a CodePen or StackBlitz?
For security reasons, on my side, I won't download a zip file.

[lcsqlpete]

OK, will try to do that today. I tried to paste the code into the issue report but for some reason, it didn't interpet all of it as html code and displayed it as a web page.

[lcsqlpete]

The codepen is here

[julien-deramond]

Your use case seems to be related to what's described in the 2nd and 3rd paragraphs of Making popovers work for keyboard and assistive technology users isn't it? Wouldn't it be better to consider using a modal dialog instead?

[lcsqlpete]

I assume you're referring to the last paragraph of the link you provided which I read as meaning form controls won't work in popovers, is that correct? Pete lcSQL Software

…

On Thu, Jul 7, 2022, 12:30 PM Julien Déramond ***@***.***> wrote: Your use case seems to be related to what's described in the 2nd and 3rd paragraphs of Making popovers work for keyboard and assistive technology users <https://getbootstrap.com/docs/5.2/components/popovers/#making-popovers-work-for-keyboard-and-assistive-technology-users> isn't it? — Reply to this email directly, view it on GitHub <#36692 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACA2CFD4RBJ3K74AA7RNNCDVS4V7DANCNFSM523OPQ5Q> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[julien-deramond]

Without talking about popover in a modal, even a simple popover containing form controls won't allow all your users to interact easily with those form controls because of what's mentioned in the paragraphs. I would suggest using a modal instead (or something else) but not a popover that doesn't seem appropriate here.

[lcsqlpete]

Ok, thanks for the clarification. I'm a little puzzled as to why this no longer works. I'm busy updating from Bootstrap 3.7 to Bootstrap 5 and ran into this issue and, as mentioned in my original post, it appears that input fields in popovers worked as late as v5.0 beta. I can't use a modal in place of the popover because I'm already in a modal and the docs say multiple modals aren't supported. I'm sure I can find another way to do it within the modal, just curious as to why it stopped working.

…

On Thu, Jul 7, 2022 at 1:07 PM Julien Déramond ***@***.***> wrote: Without talking about popover in a modal, even a simple popover containing form controls won't allow all your users to interact easily with those form controls because of what's mentioned in the paragraphs. I would suggest using a modal instead (or something else) but not a popover that doesn't seem appropriate here. — Reply to this email directly, view it on GitHub <#36692 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACA2CFEHQAF3JDXAUUYYKJLVS42HZANCNFSM523OPQ5Q> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[julien-deramond]

I confirm that it is working in your CodePen when I change the reference to use the 5.0.0-beta1.
But it appears that you have removed the tabindex="-1" isn't it? If I put it back, it doesn't work anymore even with the 5.0.0-beta1. IMHO tabindex="-1" shouldn't be removed, otherwise the accessibility for the modal will be broken.

Keeping that in mind, I'll try to find what's changed between 5.0.0-beta1 and 5.1.3.

[lcsqlpete]

Yes, I removed the tabindex since that was the recommended solution in the stack overflow post I referenced but I understand there are problems associated with that.

WHile I am interested in what changed, don't spend much time on that since I doubt it will be changed and I can probably use a hidden div instead of the popover that is displayed when the user clicks the Add button.

[patrickhlauke]

modal dialogs need to contain their focus. once a modal is open, focus is not allowed to go out of it (e.g. into the underlying page behind the semi-transparent overlay) to conform with https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/.

newer versions of bootstrap strictly enforce this. that can cause issues with other widgets that dynamically generate things like popovers etc if these live outside of the modal dialog.

try providing a container inside the modal, and explicitly pointing the popover to use that https://getbootstrap.com/docs/5.2/components/popovers/#custom-container - and in light of https://getbootstrap.com/docs/5.2/components/popovers/#making-popovers-work-for-keyboard-and-assistive-technology-users make sure that container follow immediately after the "Add" button.

as an aside, note that your "Add" button can't be activated using the keyboard, it seems.

and the tabindex="-1" on the modal is needed to make sure that it receives focus once it's opened, and for the correct focus trapping.

[lcsqlpete]

Thanks for the suggestions, I will try them. I'm closing this now since if the suggestions don;t work, I will go with a hidden div as mentioned in an earlier post.

[patrickhlauke]

@lcsqlpete i had a bit of spare time to see if i could get my suggestion above to work ... and indeed, forked your original codepen and just by changing the content: ... parameter for the popover in the JS to use .modal-body instead of body I think I got it to work just fine, without the need for any hacks like removing tabindex="-1" etc.

https://codepen.io/patrickhlauke/pen/GRxyjoG

as said, this is required because modals now enforce focus to stay inside the modal (as it should), and if the popover is generated/added to the end of the <body> element by default it's going to be outside of the modal. with this tweak, it's generated/appended to the content of .modal-body (still not ideal, you'd ideally want to provide an extra container that comes directly after the "Add" button ... but as a first stab this will do).

[patrickhlauke]

Slightly modified version, where I use an actual separate <div class="popover-container"></div> that comes straight after the "Add" control (now turned into a proper <button>) ... though this seems to mess with the placement a bit, but can likely be tweaked further. https://codepen.io/patrickhlauke/pen/poLpEbz

[lcsqlpete]

Thank you Patrick, both of your solutions appear to work.

[patrickhlauke]

got a small mention of this into the docs #36867

[lcsqlpete]

Thanks, I'm sure that will be helpful for other folks who run into this.

…

On Wed, Aug 3, 2022 at 11:32 AM Patrick H. Lauke ***@***.***> wrote: got a small mention of this into the docs #36867 <#36867> — Reply to this email directly, view it on GitHub <#36692 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACA2CFF3PGFAX2APTQO4I5DVXK3KPANCNFSM523OPQ5Q> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[singhhardy]

I was stuck in same problem while upgrading my old theme along with plugins.
The solution is
when you initialize the popover that is inside a popover in a modal.
you have to specify the container of the popover

$('#my-popover').popover{ container: 'modal' // <== Just add this to make it focusable. }