preventDefault/stopPropagation affects all clicks, not just outside
It looks like the code to preventDefault/stopPropagation (when those values are set to true) handle all events, even if the events are occurring inside the component - This seems to be because the following code is happening before the checks for inside/outside:
if (this.props.preventDefault) {
event.preventDefault();
}
if (this.props.stopPropagation) {
event.stopPropagation();
}
Is this expected behavior? The problem I am having is that our component pops out, and if you click around it, it will pop down again. But it will also select the form field or interact with whatever you clicked on the outside. If I enable preventDefault/stopPropagation, then this correctly stops the event propagating on the outside, but it also does it on the inside and so you cannot interact with the component at all.
It looks like you cannot call event.preventDefault() on the click handler (ie handle this manually), because if this value is set to false on react-onclickoutside then the events are defined as passive, and this is not an option.
Basically, is there a way to preventDefault on only events that are 'outside'?
I believe there is no such way at the moment. I'm gonna finish working on https://github.com/Pomax/react-onclickoutside/pull/246 soon-ish, I will make sure that this rewrite is gonna cover your use case.