Click event triggering twice.

[oakkar8]

react-select : 3.1.0
react: 16.11.0

In small screen mode, when i click the clear icon, the menu box also opens up..

[bladey]

Hi @oakkar8, thanks for writing in.

Could you please provide a example video of the issue, as well as tell us which browser you're using?

Thanks!

[oakkar8]

i am using chrome.

VID_20200625_205646.zip

[ebonow]

The behavior is as you described in the video, but it also seems inconsistent with the behavior I'm seeing locally let alone the first example on the site's documentation.
https://react-select.com/home

Would you mind providing sample code so we could see what props are being used as we'd like to help discover any discrepancies between your code and the other examples.

[oakkar8]

The example has also the same bug.. try with inspect mode and choose one of the phone size and try the example.. you will see as the video.

[ebonow]

Confirmed. I am able to replicate the behavior by going to Chrome DevTools > Toggle device toolbar (top left corner of window) and when emulating as Responsive.

A press on the ClearIndicator activates the Menu.

[ebonow]

More information on this:

Appears that I am getting an error in the console:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

Which ironically is a typo/bug in Chrome as the actual url is:
https://www.chromestatus.com/feature/5093566007214080

Treat Document Level Touch Event Listeners as Passive
DOM
 
AddEventListenerOptions defaults passive to false. With this change touchstart and touchmove listeners added to the document will default to passive:true (so that calls to preventDefault will be ignored)..

If the value is explicitly provided in the AddEventListenerOptions it will continue having the value specified by the page.

Looking further into this, it appears that this is not isolated to this particular instance, but with React as it uses synthetic events to register the event bindings.
facebook/react#6436

[bladey]

Thanks for investigating and the detail @ebonow.

[getaaron]

@bladey do you think this could be related to #4171? it's also related to the clear button and strange event behavior. I'm not sure, just seemed possible.

[bladey]

It's possible @getaaron, we'll investigate.

[barbalex]

This can be pretty bad if you have a function that runs using the data passed back from the event. This function will now run twice which can lead to weird stuff.

In my case it compared the data with the previous cached data. First it checked which field had changed to then update that in the store and database. But when the second event fires, the cache has already been updated. As the function did not account for no field having changed, this lead to an error in the app.

Happens in react-select v4.0.0

[ebonow]

@barbalex Thanks for confirming that this is still an issue in v4. We would be happy to look at any PR's for this and I'll keep an eye on this.