Bootstrap: v4: Cannot use input of a popover inside modal

Created on 23 Mar 2017 · 18Comments · Source: twbs/bootstrap

I've tried to create a modal with a popover inside.
This popover has html content with an _input_ and a _select_.

If i open the modal and the popover, i can use the _select_, but not the _input_.
Also, the focus is not on the _input_.

Sample here: https://jsfiddle.net/bpx3zsyz/2/

Tested in Chrome, Edge and Firefox, always with the same behaviour

js v4

Source

nunofilipesf

👍1

Most helpful comment

remove tabindex="-1" of your modal it'll work.put the below line without tabindex

satyajit11 on 23 Mar 2017

👍8 ❤1

All 18 comments

:+1:

gsferreira on 23 Mar 2017

remove tabindex="-1" of your modal it'll work.put the below line without tabindex

satyajit11 on 23 Mar 2017

👍8 ❤1

IMO @satyajit11 give a correct answer (see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).

I'm not sure it's a Bootstrap bug here, any advice @mdo or @bardiharborow ?

Johann-S on 23 Mar 2017

Our docs include tabindex="-1"—do we need to update to fix that on our end, or is there JS to tackle?

mdo on 23 Mar 2017

@Johann-S when add popover code it is append to body which is outside modal because we already have tabindex="-1" so focus won't go there.I don't proper js solution but i think we need to append inside the container or remove focus from modal when we add popover

satyajit11 on 24 Mar 2017

👍4

Removing the tabindex from the modal solved my problem.
Thanks for the help!

Can i close the issue or there is here a bug in Bootstrap to solve?

nunofilipesf on 24 Mar 2017

As @mdo said we should update our documentation and remove tabindex="-1" reference.
@nunofilipesf we have to update our documentation

Johann-S on 24 Mar 2017

removing the tabindex=-1 on the modal is NOT the solution. or rather: once you remove this, the modal cannot be programmatically focused by javascript when it's opened, meaning that accessibility for the modal is broken (screen reader doesn't announce there's a modal, doesn't read the title of the modal).

i'd suggest the problem is in the popup and the way it's generated, rather than the modal itself.

patrickhlauke on 24 Mar 2017

👍1

When #22263 will be merged @nunofilipesf you'll have to update your code to the following by adding
container attribute which specify the parent node of the modal + update your version of Tether to 1.4.0 and your input will be selectable

```javascript
$(document).ready(function () {
var popoverContent = '

\
\
\

    $('#exampleModalLong').on('shown.bs.modal', function (e) {
        var popover = $('#popover-btn').popover({
            title: '',
            placement: 'bottom',
            html: true,
            content: popoverContent,
            trigger: 'manual',
            container : '#exampleModalLong'
        });
    });

    $('#popover-btn').click(function () {
        $(this).popover('show');
    });

Johann-S on 24 Mar 2017

👍2

I tried this with the changes in the pull-request + tether 1.4.0. Tried adding an id to the modal-element and using that as the container, but I'm having issues with the position of the popover as soon as there is a scrollbar / long content in the modal. Seems like the popover moves twice as much as it should on the y-axis.

Is this something known, or am I doing something horribly wrong? :)

DavidEmanuelsen on 29 Mar 2017

Please @DavidEmanuelsen post a JSBin or a CodePen to see your issue thank you

Johann-S on 29 Mar 2017

https://jsfiddle.net/w8yh65cr/3/

Slightly ugly jsfiddle, not sure how to reference bootstrap including the changes you've made.

DavidEmanuelsen on 29 Mar 2017

It seems Tether determine position of the popover according to the scroll position 🤔

Johann-S on 29 Mar 2017

The "append" option of Tether accepts only an element that is identical to body, nothing different. (same size, same position, same everything).

This, and lot of different problems, were the reason that convinced me in opening this PR:
https://github.com/twbs/bootstrap/issues/19673

More info at https://github.com/HubSpot/tether/pull/204

FezVrasta on 5 Apr 2017

👍3

Closed and fixed by #22444

Johann-S on 14 May 2017

As of today, with the newest version, I'm still experiencing this issue.

trinaldi on 7 Nov 2017

I'm still experiencing this issue too, v4.3.1.

dersar00 on 17 May 2019

Hi @dersar00,

It seems related to your code because you have a live example which work here: https://getbootstrap.com/docs/4.3/components/modal/#tooltips-and-popovers

Anyway it's pointless to comment on a closed issue, if you have an issue open a new one with a live test example 👍

Johann-S on 17 May 2019

Was this page helpful?

0 / 5 - 0 ratings