add selectOnFocus prop to allow disabling selection on focus

packages/@react-aria/gridlist/src/useGridList.ts

@@ -96,7 +96,12 @@ export interface AriaGridListOptions<T> extends Omit<AriaGridListProps<T>, 'chil
    * - 'override': links override all other interactions (link items are not selectable).
    * @default 'action'
    */
-  linkBehavior?: 'action' | 'selection' | 'override'
+  linkBehavior?: 'action' | 'selection' | 'override',
+  /**
+   * Whether selection should occur automatically on focus.
+   * @default true (when selectionBehavior is 'replace')
+   */
+  selectOnFocus?: boolean
 }
 
 export interface GridListAria {
@@ -121,7 +126,8 @@ export function useGridList<T>(props: AriaGridListOptions<T>, state: ListState<T
     linkBehavior = 'action',
     keyboardNavigationBehavior = 'arrow',
     escapeKeyBehavior = 'clearSelection',
-    shouldSelectOnPressUp
+    shouldSelectOnPressUp,
+    selectOnFocus
   } = props;
 
   if (!props['aria-label'] && !props['aria-labelledby']) {
@@ -136,7 +142,7 @@ export function useGridList<T>(props: AriaGridListOptions<T>, state: ListState<T
     keyboardDelegate,
     layoutDelegate,
     isVirtualized,
-    selectOnFocus: state.selectionManager.selectionBehavior === 'replace',
+    selectOnFocus: selectOnFocus ?? state.selectionManager.selectionBehavior === 'replace',
     shouldFocusWrap: props.shouldFocusWrap,
     linkBehavior,
     disallowTypeAhead,

packages/react-aria-components/src/GridList.tsx

@@ -93,7 +93,12 @@ export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>
    * Whether the items are arranged in a stack or grid.
    * @default 'stack'
    */
-  layout?: 'stack' | 'grid'
+  layout?: 'stack' | 'grid',
+  /**
+   * Whether selection should occur automatically on focus.
+   * @default true (when selectionBehavior is 'replace')
+   */
+  selectOnFocus?: boolean
 }
 
 

packages/react-aria-components/test/GridList.test.js

@@ -1116,6 +1116,79 @@ describe('GridList', () => {
     });
   });
 
+  describe('selectOnFocus', () => {
+    it('should select on focus by default when selectionBehavior="replace"', async () => {
+      let onSelectionChange = jest.fn();
+      let {getAllByRole} = render(
+        <GridList aria-label="Test" selectionMode="single" selectionBehavior="replace" onSelectionChange={onSelectionChange}>
+          <GridListItem id="cat">Cat</GridListItem>
+          <GridListItem id="dog">Dog</GridListItem>
+          <GridListItem id="kangaroo">Kangaroo</GridListItem>
+        </GridList>
+      );
+      let items = getAllByRole('row');
+
+      await user.tab();
+      expect(document.activeElement).toBe(items[0]);
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      expect(new Set(onSelectionChange.mock.calls[0][0])).toEqual(new Set(['cat']));
+
+      await user.keyboard('{ArrowDown}');
+      expect(document.activeElement).toBe(items[1]);
+      expect(onSelectionChange).toHaveBeenCalledTimes(2);
+      expect(new Set(onSelectionChange.mock.calls[1][0])).toEqual(new Set(['dog']));
+    });
+
+    it('should not select on focus when selectOnFocus={false}', async () => {
+      let onSelectionChange = jest.fn();
+      let {getAllByRole} = render(
+        <GridList aria-label="Test" selectionMode="single" selectionBehavior="replace" selectOnFocus={false} onSelectionChange={onSelectionChange}>
+          <GridListItem id="cat">Cat</GridListItem>
+          <GridListItem id="dog">Dog</GridListItem>
+          <GridListItem id="kangaroo">Kangaroo</GridListItem>
+        </GridList>
+      );
+      let items = getAllByRole('row');
+
+      await user.tab();
+      expect(document.activeElement).toBe(items[0]);
+      expect(onSelectionChange).not.toHaveBeenCalled();
+
+      await user.keyboard('{ArrowDown}');
+      expect(document.activeElement).toBe(items[1]);
+      expect(onSelectionChange).not.toHaveBeenCalled();
+
+      // Selection should still work on explicit press
+      await user.keyboard(' ');
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      expect(new Set(onSelectionChange.mock.calls[0][0])).toEqual(new Set(['dog']));
+    });
+
+    it('should not select on focus when selectOnFocus={false} with multiple selection', async () => {
+      let onSelectionChange = jest.fn();
+      let {getAllByRole} = render(
+        <GridList aria-label="Test" selectionMode="multiple" selectionBehavior="replace" selectOnFocus={false} onSelectionChange={onSelectionChange}>
+          <GridListItem id="cat">Cat</GridListItem>
+          <GridListItem id="dog">Dog</GridListItem>
+          <GridListItem id="kangaroo">Kangaroo</GridListItem>
+        </GridList>
+      );
+      let items = getAllByRole('row');
+
+      await user.tab();
+      expect(document.activeElement).toBe(items[0]);
+      expect(onSelectionChange).not.toHaveBeenCalled();
+
+      await user.keyboard('{ArrowDown}');
+      expect(document.activeElement).toBe(items[1]);
+      expect(onSelectionChange).not.toHaveBeenCalled();
+
+      await user.keyboard('{ArrowDown}');
+      expect(document.activeElement).toBe(items[2]);
+      expect(onSelectionChange).not.toHaveBeenCalled();
+    });
+  });
+
   describe('shouldSelectOnPressUp', () => {
     it('should select an item on pressing down when shouldSelectOnPressUp is not provided', async () => {
       let onSelectionChange = jest.fn();