v4: Cannot use input of a popover inside modal

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

👍

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

here is example fiddle
jsfiddle

@satyajit11

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 ?

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

@Johann-S

@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

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?

@mdo

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

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.

@nunofilipesf

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');
    	});

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

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

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

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

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

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

Closed and fixed by #22444

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

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

@dersar00

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 👍

Navigation Menu

Repository navigation

v4: Cannot use input of a popover inside modal #22249

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

v4: Cannot use input of a popover inside modal #22249

Description

Activity

gsferreira commented on Mar 23, 2017

satyajit11 commented on Mar 23, 2017

Johann-S commented on Mar 23, 2017

mdo commented on Mar 23, 2017

satyajit11 commented on Mar 24, 2017

nunofilipesf commented on Mar 24, 2017

Johann-S commented on Mar 24, 2017

patrickhlauke commented on Mar 24, 2017

Johann-S commented on Mar 24, 2017

DavidEmanuelsen commented on Mar 29, 2017

Johann-S commented on Mar 29, 2017

DavidEmanuelsen commented on Mar 29, 2017

Johann-S commented on Mar 29, 2017

FezVrasta commented on Apr 5, 2017

Johann-S commented on May 14, 2017

trinaldi commented on Nov 7, 2017

dersar00 commented on May 17, 2019

Johann-S commented on May 17, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions