Skip to content

fix(useMultipleSelection): restore focus to active item after deletion#1695

Open
xianjianlf2 wants to merge 1 commit into
downshift-js:masterfrom
xianjianlf2:fix/multiple-selection-delete-focus-1614
Open

fix(useMultipleSelection): restore focus to active item after deletion#1695
xianjianlf2 wants to merge 1 commit into
downshift-js:masterfrom
xianjianlf2:fix/multiple-selection-delete-focus-1614

Conversation

@xianjianlf2

Copy link
Copy Markdown

Problem

The "sets focus on active item" effect in useMultipleSelection only depended on activeIndex. When a selected item was removed without activeIndex changing (e.g. deleting the first item keeps activeIndex at 0), the effect did not re-run. With items rendered using stable keys, the removed item's DOM node unmounts and focus is lost to the document body instead of moving to the item that now occupies the active index.

Fix

Add selectedItems.length to the effect dependencies so focus is restored to the active item whenever an item is added or removed.

Testing

Added a test in getSelectedItemProps.test.js covering focus restoration after deleting a selected item (with a supporting helper in testUtils.js). The existing useMultipleSelection test suite continues to pass.

Closes #1614

The "sets focus on active item" effect only depended on `activeIndex`, so
when a selected item was removed without `activeIndex` changing (e.g.
deleting the first item keeps `activeIndex` at 0), the effect did not
re-run. With items rendered using stable keys, the removed item's DOM node
unmounts and focus is lost to the document body instead of moving to the
item that now occupies the active index.

Add `selectedItems.length` to the effect dependencies so focus is restored
to the active item whenever an item is added or removed.

Closes downshift-js#1614
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant