I’ve been using react for a little while now and I’m having a few issues decoupling my traditional way of approaching solutions to the way they happen in react.
One of the things I’ve been struggling with is trying to reset the state of a dropdown to inactive when a user clicks outside of the component, I understand there are solutions to this available on github but they are excessive for what I am trying to achieve and what I’ve read about the native and synthetic event system has left me a bit confused.
Using a global click handler these are the two strategies I could think of to achieve what I want.
We attach a global click handler which always sets the dropdown to inactive and cancel bubbling when the user clicks the actual component
We attach the global click handler in the same way except we now use a conditional check inside of the function attached to that event to check the event target and whether or not the function should be run or aborted.
The problem I ran into with the first option is that the React synthetic event system doesn’t appear to have any effect on native events that are bound through a browser API ie
document.addEventListener('someid', this.handleGlobal) so e.stopPropagation() does nothing.
What I’d like to know
Is there anyway for a synthetic event to integrate with a native event in the way I have mentioned so that we can stop the click bubbling up to the document.
When having to actually compare DOM nodes like in the second case I mentioned above what is accepted best practice?