OutsideClick only works in the context of a single DOM tree

[sgb-io]

The technique used in this library for the OutsideClick component is closely coupled to the DOM. The technique used in this library only works in the context of a single DOM tree. This is a problem if you want to apply <OutsideClick> around a portal (imagine a context menu that appears next to a users mouse click, for example).

If you render something inside it that contains a portal, it breaks:

Uncaught TypeError: _this.el.contains is not a function
    at HTMLDocument.OutsideClick._this.onClickOutside

A potential different, more decoupled approach, would be to make use of onBlur on the OutsideClick component, tracking if the user is clicking it or something else via hover detection, but this would mean one ends up with a radically different solution.

[streamich]

Thank for the info, if you would like to implement that, PRs are welcome.

[sgb-io]

Actually this is solvable by adding a new prop to the component such as clickRoot, which allows the user to override this.el

[IssueHuntBot]

@BoostIO funded this issue with $20. Visit this issue on Issuehunt

[IssueHuntBot]

@sgb-io has started working. Visit this issue on Issuehunt

[IssueHuntBot]

@sgb-io has submitted output. Visit this issue on Issuehunt

[sgb-io]

See #22 - working solution that solves the issue by adding a new clickRoots prop

[sgb-io]

Resolved by #22