[A11y] Component with selection becomes unfocusable after an items array change in uncontrolled mode

[yara-simargil]

Expectations

The component remains keyboard focusable.
The selected item is reset on items list change.

Ideally we need a way to manually reset the useSelection hook state.

Reality

The component becomes unavailable for keyboard navigation.
The selection is not reset. If we relied on indexes and for example changed sorting, another item would get selected.

The issue is even more critical in real apps where we usually use unique ids/objects as items instead of indexes. Then any update to items array (changing sorting, filtering, search) can make the component unfocusable.

Steps to Reproduce

1. Open Selection Uncontrolled story
2. Select the last item
3. Using range control reduce the number of items

Fine Print

• Container: selection
• Browsers: all

[geotrev]

Hi Yara, useSelection is about to receive improvements in an upcoming release.

Can you help me understand this point, though? Ideally we need a way to manually reset the useSelection hook state. A

---

For some insight into the upcoming changes, the main factor will be that you can now pass your items (values) array as a parameter to useSelection, like so:

const values = ['1', '2', '3']
const retVal = useSelection({ values, defaultFocusedValue: '2', defaultSelectedItem: '2' })

Note that values must be primitives. In your case you would iterate over your objects array and map the result to just the IDs for the purposes of controlling focus and selection. In this sense, you have full control over the state of the hook.

While I don't know your exact use-case, do you foresee this level of control resolving the issue you're describing?

Let me know if I missed anything. Thanks.

[jzempel]

@yara-simargil closing for now. Please re-open if the updated useSelection isn't solving your issue.