closeOnOutsideClick doesn't work

[Rombelirk]

I've passed "closeOnOutsideClick = true" to the component, but the popup doesnt close when I click outside of it. What could be the reason?

[tbleckert]

Currently it depends on the overlay wrapper, so it's pretty "dumb". If you look at the demo you can see that the dark overlay element covers the entire page. That element has a click handler that closes the popup. So it's not an intelligent click handler that checks the click target, unfortunately.

So basically, you need to style the base element to cover the entire page. You can see the demo CSS in the gh-pages pages branch.

If that doesn't work for you, we would happily take a PR.

[hongbo-miao]

Hi @tbleckert would you mind clarifying "you need to style the base element to cover the entire page"? I still didn't figure out how should make it work.

BTW, thanks for the awesome package!

[tbleckert]

Hi @Hongbo-Miao ! Glad you like it!

The current state of the component relies on external CSS to display it properly. The outside close functionality works by having the overlay as a click area, this simplifies the events and makes it more bulletproof.

So, when mounted and displayed, the html looks like this:

<div class="{classname}">
    <div role="presentation" class="{classname}__overlay"></div>
    <article role="dialog" class="{classname}__box">...</div>
</div>

The idea is that the overlay should cover the entire page ({position: fixed; top: 0; left: 0; width: 100%; height: 100%}). You can have it totally transparent if you want to and it might depend on the use case (see demo differences between normal popups and the popover/plugin example).

In the demo page you can also find default styles to get you started.

[hongbo-miao]

Weird, I don't have overlay when the dialog popup.

Am I using wrong? Thanks for your time

<Popup
  closeBtn={false}
  closeOnOutsideClick={true}
  escToClose={true} />

const popup = Popup.register({
  content: <MyComponent />,
  noOverlay: false
});

Popup.queue(popup);

[tbleckert]

@Hongbo-Miao Ah yes, sorry. Up to v0.8.x the overlay was a wrapper (as in your screenshot), so same principle just different DOM structure. So instead of {classname}__overlay you apply the styles to mm-popup.

We changed this in v0.9.0 to allow more customization.

[hongbo-miao]

Oh, just saw 0.9 was released yesterday! Awesome, thanks!