ahume / flight-click-trap

Listen for clicks inside and outside of a component node

Hi there 👋

flight-click-trap's Issues

Look down the tree instead of up

It'd be nice to see a version of this which can sit at the top level of the document and responds to events instead of having to create a new one for each modal.

If we specify a class name to apply to modals, e.g. .has-click-trap, this component can listen for clicks inside and outside of elements where that class has been applied, and then listen for click-trap-activation-request and click-trap-deactivation-request events (not sure about the event names, might need to think about that). This way the modal doesn't need to implement click trap itself and can fire events instead.

A similar piece could be done for an overlay which would then insert the overlay beneath the component that requested it. This would prevent the need for components to reach outside their dom subtree.