Doesn't Seem To Work With Portals

[gdad-s-river]

Problem Statement — Portals are a nice way to have popovers. One use case is to have nested portals to have something like hints before dropdown menus, or nested dropdowns. Let's say we have a first level portal inside which we have a button that toggles the dropdown menu (which is also a portal). See this picture below for an idea —

Both the portals ('This is Hint' + Toggle Menu Button, 'This is Menu') are wrapped with onClickOutside HOC.

In this above picture everything works fine except one thing. When one clicks on "This is Menu" portal, because it is outside 'This is Hint' portal, as soon as it is clicked it'll close the entire Portal 1 (hence automatically Portal 2 because it is nested) which is not desired (one should be able to retain both the portals).

Quick Demo — https://codesandbox.io/s/l939jyy71l Video for the description of the problem statement

[Pomax]

It would be very useful for people who might be interested in solving this if you could put the problem description in your comment in addition to linking out to code examples and that video, as there is no guarantee either link will be available (either due to network outages, or plain old expiring).

[gdad-s-river]

@Pomax my bad! Done.

[Pomax]

You should already be able to deal with this by setting the correct ignore class on your portals - https://github.com/Pomax/react-onclickoutside#marking-elements-as-skip-over-this-one-during-the-event-loop covers the class you need to set, so from your problem description it sounds like making sure that value is known to the HOC, and set on the portal elements, things would work exactly as expected.

[gdad-s-river]

It does, thanks! I'll close this as it fulfils usecase, and not open an issue again without reading the docs and code properly for any repo 😅. Thanks again!