useComboBox focus first item

[isshesure]

is there a way to automatically focus the first combobox item when the popover is opened?

[snowystinger]

How would you keep typing in the field if focus moved away from the input to the menu?

[isshesure]

the first item could be styled and be selected on keyboard enter, whilst the input maintains focus for typing, for example like react select

[LFDanLu]

@isshesure The thing that governs what item is initially focused for our combobox is the focusStrategy returned by useComboBoxState. If your custom ComboBox loosely follows the setup that our example uses then you can either modify the state returned to the following:

  let state = useComboBoxState({...props, defaultFilter: contains});
 ...
 // If no focusStrategy set (i.e. menu opened by action other than arrow up/down), default focus to the "first" item
  state = {...state, focusStrategy: state.focusStrategy || 'first'}

or modify the default provided to useListBox in your ListBox component:

let {listBoxProps} = useListBox({...props, autoFocus: state.focusStrategy || 'first'}, state, listBoxRef);

Probably do the first one, but if that doesn't quite work then I think the second one is a more absolute way to force a default item to focus. Note that typing/moving the cursor will still clear the focused key, something which you'd have to override the keydown behavior/rewrite the hook in order to change.

It is important to note that our ComboBox item autofocus behavior was intentionally done so that Window NVDA users would get the cursor position and/or text input changes properly announced. That being said, I'm not sure if NVDA behavior has changed or if I'm recalling the correct reason haha so feel free to update here if you are experiencing something different

[isshesure]

thanks, not having any luck with either approach on this sample

[LFDanLu]

Ah yeah, async lists will add an additional wrinkle to this since the items list is being completely replaced. You may be able to do something like to set the focused item to the first one in the collection if it can't find one. Once again note that typing/moving the cursor will clear the focused key due to these lines:
https://github.com/adobe/react-spectrum/blob/b34e500ddd6ca860cbc943f90a85ea911f2d881b/packages/%40react-stately/combobox/src/useComboBoxState.ts#L186-L188https://github.com/adobe/react-spectrum/blob/b34e500ddd6ca860cbc943f90a85ea911f2d881b/packages/%40react-aria/combobox/src/useComboBox.ts#L130-L133
which you may be able to potentially override by tracking the last focusedKey and reapplying it when it gets cleared?

All in all, it gets pretty hacky and I wouldn't recommend going ahead with the above changes without doing extensive testing (may break internal logic and/or accessibility as mentioned in my previous comment.