Unable to focus Input element inside a Bootstrap Popover inside a jQuery UI Dialog

Question

I am having a difficult time getting this to work. I have a link that opens a jQuery UI Dialog which contains links. Those links open a Bootstrap popover which contain an input field. For some reason, the input field is not editable.

See: http://www.bootply.com/Z46ZXA133U

Markup :

<div id="dialog">
  <a data-placement="bottom" data-toggle="popover" data-title="Login" data-container=".ui-front" type="button" data-html="true" href="#" id="login">Login</a>
</div>
<form id="popover-content" style="display:none">
  <input type="text" value="try changing me">
</form>

Script :

$( "#dialog" ).dialog({
    height: 300,
    width: 350,
    modal: true,
});
$("[data-toggle=popover]").popover({
    html: true, 
    content: function() {
        return $('#popover-content').html();
    }
});

Linoleum

appears to be some layer and focus confusion between the modal dialog you have created and the popover that appears upon clicking "login." – Begley

I've checked the z-indices and they seem to be fine. – Linoleum

Answer 1

This is because you have

data-container="body" 

on your popover. At the same time, ui-widget-overlay and ui-front covers the body area entirely, preventing clicks and keyboard events from being "sent" from body to the popover.

Change to

data-container=".ui-front"

and you are good. Forked bootply -> http://www.bootply.com/AXpc6PKuSO

Sarpedon

Answer 2

in my case change data-container="body" to .ui-front did not help! But the direction is right I get modal body container selector and use them!

container: '#myModal-2 > section > div.modal-dialog > div',

Try to explain: if you use container='body' and use modal then modal overlay is blocking focus on body elements

Irving

Answer 3

I fixed this issue by removing tabindex="-1" from the modal div

Misogyny