React-select: Use of AsyncSelect in combination with Dashlane password manager Chrome extension stalls browser

[gregholst]

The following is probably not a bug in React-Select but in the Dashlane Chrome Extension, but I still post it here because 1) maybe still something on react-select side could be done and 2) it creates a problem for React-Select developers on production websites, since Dashlane is a widely used password manager.

In the following https://codesandbox.io/s/react-codesandboxer-example-7d6w6?file=/example.js the problem gets visible in this constellation:
MacOS Catalina, Chrome v81 using Dashlane extension
When you click into the "type zip code" box, you can type a number and the list of available ZIP codes gets visible (not loaded for this demo), then Dashlane recognizes this as input box and you will see a grey Dashlane icon within the input field. As soon as you leave the box the browser gets unresponsive.

If using this code in an actual application you can reproduce the stall as described above, go to Chrome dev tools, interrupt the running script and you will see the stall is caused by Dashlane.

Possible solutions?
1) Something on react-select (unprobable, but I am not an expert in this library)
2) Dashlane fixes their bug (let's see how long this takes, I have informed them, but not clear if they will take care of it)
3) It seems Dashlane is looking for the button to the right to see which input fields they identify as possible fields for using their autofill option. Move the button to the left and the autofill option will not be visible anymore.

PS: Sometimes the problem is not reproducible, because the Dashlane icon does not appear in the input field and then the stall does not happen. Dashlane's algorithm on how to identify input fields is of course unknown to me (besides the point 3) and it seems that Dashlane is not willing to give hints on how to circumvent their autofill option (for obvious reasons).

[kundansable]

I am facing same problem
after selection of option, whole screen just froze. no right or left click, no key press on tab

[gregholst]

@kundansable In case your page is already live you could use the "report an issue" button within the extension. I wrote to their customer support (my page is not live yet), but the person was not really understanding the consequences of the problem and finally at least forwarded it to their product team. Would be great if you could also let them know.
I am also not sure if the problem could be on react-select side, due to some uncommon implementation. Let's see.

[kundansable]

@gregholst I will report an issue to dashlane.but meanwhile I used alternative package for react-select till it gets fixed.

[gregholst]

@kundansable
What alternative package did you make use of? I might also need to look for one, since a browser crash is really a bad user experience.

[juliencharrel]

@kundansable I'd love to know as well, it's pretty annoying for my users too.

[gregholst]

I managed that things get escalated at Dashlane, will let you know as soon as they fixed the problem.

[kundansable]

@gregholst @juliencharrel Right now I am using material UI select, but it is not that good. for async I am using react-bootstrap-typeahead.

[tsnevillecom]

Having the same issue. Freezes consistently.

[bladey]

@gregholst thanks for reporting this issue to Dashlane, do you have any updates since you last spoke to them?

[gregholst]

I checked back with Dashlane yesterday and they confirmed that the bug was fixed in their Chrome extension. They say any version above 6.2019 should work. I tested with 6.2020.3 and couldn't reproduce the issue. So I am going to close this issue.

[bladey]

Thanks for taking the time to update us @gregholst, much appreciated.