Radix Select with Combobox instantly closes on Android

[thgh]

Current behavior

On press, options appear and disappear.

Steps to reproduce the bug

1. Open https://ariakit.org/examples/combobox-radix-select on mobile
2. Press the combobox

Expected behavior

It should show options, with keyboard focused on search field

Workaround

#3274 (comment)

Possible solutions

#3274 (comment)

[diegohaz]

@thgh, could you please tell me which device and OS you're using?

[thgh]

Chrome on Android

[diegohaz]

Alright, it could be an issue with Android, as I wasn't able to reproduce it on iOS.

[georgekaran]

I debugged for a bit and found out that the resize event is triggered when the on-screen keyboard is displayed.
https://github.com/radix-ui/primitives/blob/f873591ac32c31df9e860d3b6fc65be3cb910ba4/packages/react/select/src/Select.tsx#L601-L609

React.useEffect(() => {
  const close = () => onOpenChange(false);
  window.addEventListener('blur', close);
  window.addEventListener('resize', close);
  return () => {
    window.removeEventListener('blur', close);
    window.removeEventListener('resize', close);
  };
}, [onOpenChange]);

[diegohaz]

Issue on Radix UI: radix-ui/primitives#2634 (thanks @georgekaran)

The fix probably won't be merged soon, so it'd be great if we could figure out a way to fix it directly in the example.

[gorechavka]

has anyone found any workarounds?

[diegohaz]

This needs to be tested to ensure there are no unexpected side effects. But adding something like this to the component should work around the Radix issue:

useEffect(() => {
  const onResize = (event: Event) => {
    event.stopImmediatePropagation();
  }
  window.addEventListener("resize", onResize);
  return () => {
    window.removeEventListener("resize", onResize);
  }
}, []);