useSelect doesn't return focus to toggle button after selection with VoiceOver on iOS
Author: brbintenyearsCreated Nov 25, 2025Updated Jan 31, 2026
Labelshas workaroundwaiting for author
Steps to reproduce:
- On an iOS device, go to the example in the docs at https://www.downshift-js.com/use-select#basic-usage
- Enable VoiceOver.
- Toggle the select and make a selection
Expected result: After a selection is made, the focus should return back to the toggle.
Actual result: Focus lands on whatever happens to be underneath the selected item.
Here's a screen recording of the bug.
https://github.com/user-attachments/assets/8b9a7a46-3aef-47ca-84dc-e79ae46004b4
I attempted to mitigate this in my implementation by setting a ref on the toggle button and then sending the focus back to the toggle after a selection is made with variations of the following, but no such luck. At first I thought it was a problem with my implementation, but when I checked the example in the docs I found the problem reproducible on there as well.
const toggleRef = useRef<HTMLDivElement>(null);
const { /* ... */ } =
useSelect({
// ...
onSelectedItemChange: () => toggleRef?.current?.focus(),
});
}
return (
//...
<div
className="p-2 bg-white flex justify-between cursor-pointer"
{...getToggleButtonProps({ ref: toggleRef })}
>
// ...
</div>
//...
);Source: downshift-js/downshift