react-onclickoutside icon indicating copy to clipboard operation
react-onclickoutside copied to clipboard

preventDefault/stopPropagation affects all clicks, not just outside

Open ajorkowski opened this issue 8 years ago • 1 comments

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'?

ajorkowski avatar Dec 18 '17 03:12 ajorkowski

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.

Andarist avatar Dec 18 '17 08:12 Andarist