Issues with popover inside modal

[praveenpuglia]

On the docs page for modals, there are some weird issues with the modal.

To reproduce the issues, go to that docs page and scroll to Live Demo section. Click on Launch demo modal.

This modal has a popover inside it which triggers upon clicking. Now.

1. Upon triggering the popover, the page in background is scrolled to top. I would expect it to just show the popover and the background page to stay where it is. I agree that it goes back to the correct scroll position after the modal is closed and focuses on the modal trigger but I wish it didn't scroll the entire page when the popover was opened inside it.
2. If I close the modal with the popover open, the modal get's destroyed but not the popover and it weirdly sticks on the top left corner of the screen as seen in the following screenshot.

[nschomberg]

Hi @praveenpuglia,

Upon triggering the popover, the page in background is scrolled to top. I would expect it to just show the popover and the background page to stay where it is. I agree that it goes back to the correct scroll position after the modal is closed and focuses on the modal trigger but I wish it didn't scroll the entire page when the popover was opened inside it.

This issue seems to be standard HTML behavior. When an anchor tag's href is set to "#", clicking the anchor will bring you back to the top of the page. To avoid scrolling, the markup should set the anchor's href as "javascript:void(0)" instead.

If I close the modal with the popover open, the modal get's destroyed but not the popover and it weirdly sticks on the top left corner of the screen as seen in the following screenshot.

The issue with the lingering popover problem is caused by the popover not being hidden in the same way as the modal. When a modal gets dismissed, the CSS will hide the modal div and all of its children elements. The problem here has to do with the popover not being a child element of the modal, thus it doesn't get hidden along with the modal.

When a popover is shown, it gets dropped onto the DOM at the end of the body. A solution to this problem could be to append the popover to the modal container instead.

Another solution could be, when dismissing a modal, to look for children elements that popovers are tethered to. jQuery could then be used to select those popovers and dismiss them.

Let me take a crack at this and get back to this issue.

[bardiharborow]

The first point in this issue is a duplicate of #19270. The second will be fixed by #21228.

[mdo]

Closing out per previous comment since this will all be tackled.