search

downshift-js / downshift

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
http://downshift-js.com/
MIT License
12.09k stars 929 forks source link

Selected item is not updated in mobile devices #1554

Open RohitHF opened 1 year ago

RohitHF commented 1 year ago

Relevant code or config https://www.downshift-js.com/use-select/#basic-multiple-selection

What you did: Tested the example in iPhone ios v16+ What happened: The selection is not updated on clicking outside to close the dropdown select. It works fine if we toggle without clicking outside

Reproduction repository:

Problem description: The mobile devices do not get the correct selected items on clicking outside. Attached video

Suggested solution: If we can disable the closing of select dropdown on clicking outside, we can use this in touch devices.

https://github.com/downshift-js/downshift/assets/94677320/1a05172b-ac4b-4610-9edd-a62da0d6e571

silviuaavram commented 12 months ago

You can also disable selection on button blur. It's unfortunate that it has to be done in order to avoid this behaviour on mobile.

silviuaavram commented 12 months ago

This will require a change and a fix on our side as well. Will update once they are done.

RohitHF commented 8 months ago

Thanks for the update @silviuaavram . Is there any ETA on this?

silviuaavram commented 8 months ago

@RohitHF Could you give me again a few more details related to repro steps, actual behaviour and expected behaviour?

After looking at the docs example, it seems to me that the mobile behaviour is the same as the desktop one.

silviuaavram commented 7 months ago

Actually, I think the behaviour is consistent. If you have a highlighted item and you blur, it will get selected on both mobile and web. The actual problem is the different behaviour between select and combobox. I have opened an issue on ARIA, we will update our hooks as they suggest.

https://github.com/w3c/aria-practices/issues/2966