downshift-js / downshift-js/downshift

[useMultipleSelection] Backspace/Delete on selected items does not progress focus on tags correctly

Open
#1,614 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.3k
Forks
936
PR merge metrics
No merged PRs in 30d

Description

- `downshift` version: 9.0.6
- `node` version: 18.20.3
- `npm` (or `yarn`) version: 10.2.3

**Reproduction repository**:

Example: This is basically just the multiple selection with useSelect example from the docs (sans styling - sorry!)
https://stackblitz.com/edit/vitejs-vite-wimxfe?file=src%2FSelect.jsx

**Problem description**:

When deleting selected item tags using Backspace/Delete, if the selected item you're deleting is not the last item in the `selectedItems` array the focus does not move to the next selected item after as expected. This happens because focus is only moved to a `selectedItem` when the `activeIndex` changes here
https://github.com/downshift-js/downshift/blob/ee2a828ac70035c1e6156523b72c11abae4c07e4/src/hooks/useMultipleSelection/index.js#L62-L74
But when you delete an item that isn't the last selected item the `activeIndex` stays the same:
https://github.com/downshift-js/downshift/blob/ee2a828ac70035c1e6156523b72c11abae4c07e4/src/hooks/useMultipleSelection/reducer.js#L30-L52

The reason it works in the example in the docs is because that example derives the key for the selected item tags using the index of the item in the `selectedItems` array so the element that the Delete/Backspace event was dispatched on isn't removed from the DOM (but just re-renders with the next `selectedItem`'s data) and so it continues to keep focus. If you use say the item ID for the React component key though, then the focus does not move correctly to the next element because the aforementioned effect never fires.

**Suggested solution**:

I think if we set some sort of internal boolean state to indicate that we need to set focus on the next render when a Delete/Backspace event happens where the `activeIndex` is gonna stay the same, that should resolve this. Though obviously that will not work if the consumer has not updated the `selectedItems` list by that next render - I don't know if that's actually something this library is (or even should be) concerned with. I'd be willing to submit a PR for this if I can get some folks' opinions on the suggested fix.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.