downshift-js / downshift-js/downshift

useSelect doesn't return focus to toggle button after selection with VoiceOver on iOS

Open
#1,664 2 comments 0 reactions 0 assignees View on GitHub
has workaround waiting for author
Dominant language
JavaScript
Stars
12.3k
Forks
936
PR merge metrics
No merged PRs in 30d

Description

**Steps to reproduce:**

1. On an iOS device, go to the example in the docs at [https://www.downshift-js.com/use-select#basic-usage](https://www.downshift-js.com/use-select#basic-usage)
2. Enable VoiceOver.
3. 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(null);

const { /* ... */ } =
useSelect({
// ...
onSelectedItemChange: () => toggleRef?.current?.focus(),
});
}

return (
//...


// ...

//...
);

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.