Combobox: Make it possible to set initial navigationValue

[vovakulikov]

🚀 Feature request

When openOnFocus is set to true, it might be useful to have control over the initial navigation value in order to make a better UX for keyboard navigation; for example, let's imagine we have the following component.

<Combobox openOnFocus={true}>
   <ComboboxInput autoFocus={true}>
   <ComboboxList initialNavigationValue="value3">
       <ComboboxOption value="value1" />
       <ComboboxOption value="value2" />
       <ComboboxOption value="value3" />
       <ComboboxOption value="value4" />
   </ComboboxList>
</Combobox>

In this example,

• Combobox Input has autofocus
• We always render the Combobox list (unconditionally)
• And the initial navigation value is set to value3

This means when the user clicks the arrow down we will highlight the 4th option item (value4). See the following sections when this behaviour may be useful.

Current Behavior

At the moment, there is no way to have control over navigationValue. In terms of the example above, we will always highlight the first element and then the second element and so on and so on.

When setting initial navigation value might be useful

Let's say we use Combobox as an additional UI for another picker. This picker has a selected state, and we want to show this selected state in the Combobox List suggestions. And we can do it actually at the moment because we have control over Combobox options rendering. See the following image.

So far, so good, but when I try to navigate through Combobox options, I have to go through all suggestions to get the selected one because even if we have access to rendering suggestions, navigationValue is still a part of the internal-like state and we can't control it.

Screen.Recording.2022-10-14.at.21.41.39.mov

Desired Behavior

Screen.Recording.2022-10-14.at.21.43.33.mov

Suggested Solution

Introduce new initialNavigationValue prop in the ComboboxList component. Similar to persistSelection prop. And pass new prop information with the FOCUS event to the reducer, if initialNavigationValue isn't null then set its value to navigationValue in the reducer.

Who does this impact? Who is this for?

This will make UX better for all consumers who use combobox as an additional UI for high-level pickers.

Describe alternatives you've considered

We can actually use persistSelection={true} in the ComboboxList component, and if the input has a value that matches with one of the suggestions, it will select it when the user starts to navigate from a keyboard.

But this forces us to have non-empty input, which means we should have controlled input and usually, this means that we have to have weird checks around input value and API calls.

Like

• You open the combobox, and you know the value that is selected, and you want to highlight
• To do it, you set persistSelection and pass value and onChange props to input
• You also may have a logic that observes input value and makes API network
• In the first render, you need to ignore the non-empty input value and make a standard empty input suggestions API call. To fetch a standard amount of suggestions (not only that match input value)

This makes me think that it would be better to have the option to set just navigationValue in some cases instead of relying on an input value to derive navigation value.

Additional context