Autocomplete: option for disabling auto-focus of search field?

[jeffijoe]

Provide a general summary of the feature here

I'd like a prop for Autocomplete that turns off the automatic focusing of the search field when interacting with items.

🤔 Expected Behavior?

When the new prop disableAutoFocusOnItemInteraction (name tbd 😅 ) is true, interacting with items in the list will not trigger focus on the search field. However, if the search field is already focused, then the focus will be maintained.

😯 Current Behavior

Currently, any interaction with the items triggers focus on the search field. This causes the soft keyboard on mobile devices to appear, which is unexpected.

💁 Possible Solution

No response

🔦 Context

I'm using autocomplete inside of a modal. Since I'm animating the modal in with a slide-in animation using motion/react, the auto-focus behavior breaks the visual viewport adjustment that react-aria makes to fit the dialog within the viewport. Additionally, with auto-focus, the keyboard cannot be dismissed on iOS (this appears to be a general bug).

focus-issue-encoded.mp4

As a workaround, I decided to disable autoFocus on the search field for the autocomplete. However, now, when the user interacts with an item that is halfway down the visible viewport, the keyboard opens and covers the item that the user interacted with.

autofocus-autocomplete-encoded.mp4

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

This seems reasonable, but we'd like it not to be a prop. Perhaps this virtual focus behavior should be based on modality instead, aka perhaps we disable it for modalities other than keyboard. Will have to play around with the experience to see how it feels though

[jeffijoe]

So we're saying only trigger actual focus (which in turn would trigger the soft keyboard) when using the keyboard for navigation? That would make sense to me, assuming we can still auto-focus for hardware keyboard users?

[LFDanLu]

Right, if we turn off virtual focus for modalities other than keyboard, theoretically the search field and the associated wrapped collection will simply behave as two separate tabbable entities.

[devongovett]

Basically we'd need to add a touch interaction check here

react-spectrum/packages/@react-aria/autocomplete/src/useAutocomplete.ts

Lines 92 to 94 in b0c0454

	if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current) {
	inputRef.current.focus();
	}