diff --git a/packages/@react-aria/selection/src/useSelectableCollection.ts b/packages/@react-aria/selection/src/useSelectableCollection.ts index 0d67ea18faf..1b55f350573 100644 --- a/packages/@react-aria/selection/src/useSelectableCollection.ts +++ b/packages/@react-aria/selection/src/useSelectableCollection.ts @@ -342,12 +342,11 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions } manager.setFocused(true); - if (manager.focusedKey == null) { - let navigateToFirstKey = (key: Key | undefined | null) => { + let navigateToKey = (key: Key | undefined | null) => { if (key != null) { manager.setFocusedKey(key); - if (selectOnFocus) { + if (selectOnFocus && !manager.isSelected(key)) { manager.replaceSelection(key); } } @@ -357,9 +356,9 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions // and either focus the first or last item accordingly. let relatedTarget = e.relatedTarget as Element; if (relatedTarget && (e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING)) { - navigateToFirstKey(manager.lastSelectedKey ?? delegate.getLastKey?.()); + navigateToKey(manager.lastSelectedKey ?? delegate.getLastKey?.()); } else { - navigateToFirstKey(manager.firstSelectedKey ?? delegate.getFirstKey?.()); + navigateToKey(manager.firstSelectedKey ?? delegate.getFirstKey?.()); } } else if (!isVirtualized && scrollRef.current) { // Restore the scroll position to what it was before. diff --git a/packages/@react-aria/selection/test/useSelectableCollection.test.js b/packages/@react-aria/selection/test/useSelectableCollection.test.js index d8c0801177c..815f8845619 100644 --- a/packages/@react-aria/selection/test/useSelectableCollection.test.js +++ b/packages/@react-aria/selection/test/useSelectableCollection.test.js @@ -107,5 +107,28 @@ describe('useSelectableCollection', () => { expect(options[1]).not.toHaveAttribute('aria-selected'); expect(options[2]).toHaveAttribute('aria-selected', 'true'); }); + + it("doesn't change the selection on focus in multiple selection selectOnFocus", async () => { + let onSelectionChange = jest.fn(); + let { getByRole, getByText } = render( + <> + + + Paco de Lucia + Vicente Amigo + Gerardo Nunez + + + ); + await user.click(getByText('before')); + await user.tab(); + + expect(onSelectionChange).not.toHaveBeenCalled(); + }); }); });