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();
+ });
});
});