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

[brbintenyears]

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
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.

downshiftjs_useSelect_bug.MP4

---

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>
    //...
);

[silviuaavram]

Hey @brbintenyears thanks for reporting the issue! Does the onSelectedItemChange code you shared fix the issue? As far as I know, when testing on web, the focus always stays on the combobox (button). But here we're talking about the VO cursor, not the kb focus, so not sure if we can do anything about it. Do other libraries work as expected? (react spectrum, mui, react select)

[brbintenyears]

Thank you for the response @silviuaavram . The code I had shared unfortunately did not fix the issue. However, I had found a mechanically similar but different workaround that did fix the issue by using a hook to detect when a selection was made, and essentially overwhelming the browser with focus calls so VO picks it up.

It's an ugly solution but it seems to do the trick.
It looks something like this:

  useLayoutEffect(() => {
    // I user the navigator.userAgent to determine if the device is an iOS device
    if (!isIos()) return;

    // This condition is to prevent run on initial render
    if (hasSelectElRendered.current) {
      let focusInterval = 10;
      let focusTotalReps = 10;
      toggleRef?.current?.blur();
      var focusReps = 0;
      var interval = setInterval(function () {
        toggleRef?.current?.focus();
        focusReps++;
        if (focusReps >= focusTotalReps) {
          clearInterval(interval);
          // Close the menu after focus has moved - otherwise, VO might get upset at the menu unmounting while it's still on it and lose/move focus to the top of the page
          setIsMenuOpen(false);
        }
      }, focusInterval);
    }
  }, [selectedValue]);

I tested a few other libraries:

• react-spectrum returns the VO cursor as expected.
• mui-select returns the VO cursor to the element as expected.
• react-select is not usable with VO, so I ignored it from testing.

It's also worth mentioning that I'm doing all of my testing on iOS 18. I've heard reports of iOS 26.2 introducing many bugs into VO and the cursor being jumpy, so I can't vouch for if any of those libraries continue to work as expected on iOS 26.2, but at least on iOS 18 they seem to be doing what they're supposed to.