search

boblauer / react-onclickout

An ES6-friendly on-click-outside React component.
MIT License
92 stars 14 forks source link

Optional useCapture for addEventListener #9

Closed maullerz closed 8 years ago

maullerz commented 8 years ago

Hello! With useCapture param we can use stopPropagation() and prevent event from bubling on above elements.

maullerz commented 8 years ago

this PR was incorrect - #10 but what another way can we propose to implement such behavior?

boblauer commented 8 years ago

What is the exact behavior that you are trying to achieve?

maullerz commented 8 years ago

I have some table with search panel on top. When clicked on search panel modal form appeared, and i want to close that form when click out of it. And i want to stop propagation of click-event to prevent clicking on controls laying under.

2016-07-19 18 22 53
boblauer commented 8 years ago

And are you sure the click event triggers on the elements underneath? I don't think they should, because by the time the onClickOut handler is called, the event has bubbled all the way up to the window

maullerz commented 8 years ago

Yes i am sure, cause bubbling going through that controls before window event handler executes (window is last).

boblauer commented 8 years ago

Thanks for the screenshot, that helps.

How about adding a transparent overlay behind the modal, to prevent anything else from being clicked?

maullerz commented 8 years ago

Yes exactly this way i have used for workaround. And this is nice feature to have already implemented in component. 💟

boblauer commented 8 years ago

I'm not quite sure how I would go about implementing it. The way the event system is currently set up, I don't see how I could prevent the onclick event from happening outside of the modal.

Closing for now, as a transparent overlay seems to be the best approach for the time being.