Select - add shouldCloseOnSelect

packages/@react-aria/test-utils/src/select.ts

@@ -24,7 +24,9 @@ interface SelectTriggerOptionOpts extends SelectOpenOpts {
   /**
    * The index, text, or node of the option to select. Option nodes can be sourced via `options()`.
    */
-  option: number | string | HTMLElement
+  option: number | string | HTMLElement,
+
+  shouldStayOpen?: boolean
 }
 
 export class SelectTester {
@@ -164,6 +166,7 @@ export class SelectTester {
   async selectOption(opts: SelectTriggerOptionOpts): Promise<void> {
     let {
       option,
+      shouldStayOpen = false,
       interactionType = this._interactionType
     } = opts || {};
     let trigger = this.trigger;
@@ -203,7 +206,7 @@ export class SelectTester {
         }
       }
 
-      if (option?.getAttribute('href') == null) {
+      if (option?.getAttribute('href') == null && !shouldStayOpen) {
         await waitFor(() => {
           if (document.activeElement !== this._trigger) {
             throw new Error(`Expected the document.activeElement after selecting an option to be the select component trigger but got ${document.activeElement}`);

packages/@react-stately/select/src/useSelectState.ts

@@ -54,7 +54,9 @@ export function useSelectState<T extends object>(props: SelectStateOptions<T>):
         props.onSelectionChange(key);
       }
 
-      triggerState.close();
+      if (props.shouldCloseOnSelect ?? true) {
+        triggerState.close();
+      }
       validationState.commitValidation();
     }
   });

packages/@react-types/select/src/index.d.ts

@@ -36,7 +36,9 @@ export interface SelectProps<T> extends CollectionBase<T>, Omit<InputBase, 'isRe
   /** Sets the default open state of the menu. */
   defaultOpen?: boolean,
   /** Method that is called when the open state of the menu changes. */
-  onOpenChange?: (isOpen: boolean) => void
+  onOpenChange?: (isOpen: boolean) => void,
+  /** Should the menu be closed when an item is selected? */
+  shouldCloseOnSelect?: boolean
 }
 
 export interface AriaSelectProps<T> extends SelectProps<T>, DOMProps, AriaLabelingProps, FocusableDOMProps {

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

@@ -192,6 +192,34 @@ describe('Select', () => {
     expect(trigger).toHaveTextContent('close');
   });
 
+  it('should stay open on selecting an option if shouldCloseOnSelect is false', async () => {
+    let {getByTestId} = render(
+      <Select data-testid="select" shouldCloseOnSelect={false}>
+        <Label>Favorite Animal</Label>
+        <Button>
+          <SelectValue />
+        </Button>
+        <Popover>
+          <ListBox>
+            <ListBoxItem>Cat</ListBoxItem>
+            <ListBoxItem>Dog</ListBoxItem>
+            <ListBoxItem>Kangaroo</ListBoxItem>
+          </ListBox>
+        </Popover>
+      </Select>
+    );
+
+    let selectTester = testUtilUser.createTester('Select', {root: getByTestId('select')});
+    let trigger = selectTester.trigger;
+
+    await selectTester.open();
+    expect(trigger).toHaveAttribute('data-pressed', 'true');
+
+    await selectTester.selectOption({option: 'Dog', shouldStayOpen: true});
+    expect(trigger).toHaveTextContent('Dog');
+    expect(trigger).toHaveAttribute('data-pressed', 'true');
+  });
+
   it('should send disabled prop to the hidden field', () => {
     render(
       <TestSelect name="select" isDisabled />