Keep focus inside of ComboboxInput

[chirokas]

Issue can be seen in the docs or storybook on mobile.

When you open the combobox via the button, the focus moves briefly to the button, and then we restore the focus to the input itself.

This causes a tiny selection flicker (because the selection is removed when the focus moves to the button)

Also, We want to make sure that we don't accidentally trigger the virtual keyboard. This would happen if the input is focused, the options are open, and you click the ComboboxButton (which would blur the input and focus the button, then we refocus the input).

This PR improves on that behaviour by using onPressStart instead of onPress. If we use inputRef.current.focus() in onPressStart, then the focus will not be moved to the button and the focus remains in the input.

[snowystinger]

Thanks for the PR. I'm pretty sure the current behavior is intentional. With touch, it's easy to interact with the wrong element, so we make sure that the interaction was international, which means waiting to see if the user drags their finger away from the trigger to cancel.

You will see this in components such as Menu as well. The menu won't open until onPress, and likewise, an element won't be selected until onPress.

We might be able to move the focus onPressStart, but wait to open until onPress.

@LFDanLu I think you've been involved in some of this work, do you know if there a reason we don't move focus during onPressStart before opening?

[chirokas]

We might be able to move the focus onPressStart, but wait to open until onPress.

@snowystinger I think this can be solved by preventFocusOnPress.

// packages/@react-aria/combobox/src/useComboBox.ts
  buttonProps: {
    ...menuTriggerProps,
    ...triggerLabelProps,
    excludeFromTabOrder: true,
+    // @ts-ignore - undocumented
+    preventFocusOnPress: true,
    onPress,
    onPressStart,
    isDisabled: isDisabled || isReadOnly,
  },

[snowystinger]

Yes, I think that would be better, that's what we do with NumberField as well

react-spectrum/packages/@react-aria/numberfield/src/useNumberField.ts

Line 290 in 14f324f

preventFocusOnPress: true,

Though I'll still have Daniel check if there was a reason we weren't already doing that. Thanks for digging a little extra.

[LFDanLu]

@snowystinger from what I recall it is exactly what you mentioned, aka mimicking the same behavior as menus/other trigger elements.

EDIT:
I think using preventFocusOnPress should be fine, will need to test across all devices to be sure though

[LFDanLu]

Tested on desktop and mobile, verified that the behavior with the virtual keyboard is much better now in RAC. I think this is good enough for now, we'll test it more rigorously in a upcoming test session. Thanks for the change!