Cannot focus input element inside boot popover inside jQuery UI dialog

Question

I have a hard time making it work. I have a link that opens a jQuery UI dialog containing links. These links open a Bootstrap popup that contains 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(); } }); 

Answer 1

This is because you have

 data-container="body" 

in your popover. At the same time, ui-widget-overlay and ui-front completely covers the body area, preventing the "forwarding" of clicks and keyboard events from the body to the popover.

Change to

 data-container=".ui-front" 

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

Answer 2

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

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

Try to explain: if you use container = 'body' and use modal, then the modal overlay blocks focus on body elements