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 : ```

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

Accepted Answer

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

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

Solution

Problem