[v5] popover closing issue

[th3fallen]

Issue description

popover within popover closes on click of inner most (active) popover

• version #5.0.0-alpha.1
• components: popover

Steps to reproduce issue

have a popover with a button that opens another popover on click then the secondary popover has a button that interacts with state i.e. a date picker

a Gif of the issue as well https://cl.ly/mlI1/Screen%20Recording%202017-09-27%20at%2010.08%20AM.gif

• ...

[th3fallen]

this also occurs for a popover within a modal that has a clickable item inside it.

[TheSharpieOne]

Not 100% sure how the first popover is staying open since it appears that the popover currently doesn't not (double negative) trigger the toggle callback when the popover itself is clicked.

[th3fallen]

i guess that could be the entire issue, should the popover toggle itself when it is clicked?

[TheSharpieOne]

bootstrap's doesn't close, so I assume it should not trigger the callback. I already made the fix but got sidetracked. I'll push it up when I get some time later.

[th3fallen]

Awesome, thanks so much

[TheSharpieOne]

So.. the issue which caused the popover to close when clicking inside of the popover has been fixed in released in 5.0.0-alpha.2 (use npm i reactstrap@next to get it)... but you have to use container="inline" to inline the nested popover so that it is within the first popover so that clicking the nested one is also clicking the first one and doesn't trigger the first one (nor the nested one) to close... but bootstrap doesn't support nesting popovers, especially inline. The styles get jacked up if the popovers do not have the same placement
Let me know if this can solve your issue or not (seeing how your first popover was already not closing, I think this may help you, even without container="inline"). If not then I will look more into it working without container="inline" which should fix the styling issue. The issue becomes that popovers don't know about other popover nor when they are clicked, not without a global handler or looking to see if the event bubbles from a given classname (.popover) or something like that which feels very loose.

[TheSharpieOne]

Actually, don't know why I didn't think about this earlier, but you don't have to set the toggle prop. Don't pass it for the inner popover and "manually" close it when a date is selected. If the outer one closes, it will close the inner one (unmount), the only edge case is clicking outside of the inner one but inside of the outer one... Eh just a thought

[th3fallen]

Thanks for the deep thought on this but yeah we already make the first popover not toggle when clicked outside of it as it contains a form so the fix you've already made will totally resolve the issue for us. thanks again!