v4: Cannot use input of a popover inside modal

[nunofilipesf]

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

[gsferreira]

👍

[satyajit11]

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

here is example fiddle
jsfiddle

[Johann-S]

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 ?

[mdo]

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

[satyajit11]

@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

[nunofilipesf]

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?

[Johann-S]

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

[patrickhlauke]

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.

[Johann-S]

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

    $(document).ready(function () {
    	var popoverContent = '<div> \
                                    <select class="form-control mb-1"> \
                                        <option value="eq">Is equal to</option>  \
                                        <option value="ct">Contains</option> \
                                    </select> \
                                    <input type="text" class="form-control"> \
                                </div>';
    
    	$('#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');
    	});
    

[DavidEmanuelsen]

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? :)

[Johann-S]

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

[DavidEmanuelsen]

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

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

[Johann-S]

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

[FezVrasta]

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:
#19673

More info at shipshapecode/tether#204

[Johann-S]

Closed and fixed by #22444

[trinaldi]

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

[dersar00]

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

[Johann-S]

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 👍