fix: Select typeahead spaces (#8497)

Author: snowystinger

packages/@react-aria/menu/src/useMenuTrigger.ts

@@ -68,7 +68,11 @@ export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTrigge
       switch (e.key) {
         case 'Enter':
         case ' ':
-          if (trigger === 'longPress') {
+          // React puts listeners on the same root, so even if propagation was stopped, immediate propagation is still possible.
+          // useTypeSelect will handle the spacebar first if it's running, so we don't want to open if it's handled it already.
+          // We use isDefaultPrevented() instead of isPropagationStopped() because createEventHandler stops propagation by default.
+          // And default prevented means that the event was handled by something else (typeahead), so we don't want to open the menu.
+          if (trigger === 'longPress' || e.isDefaultPrevented()) {
             return;
           }
           // fallthrough

packages/@react-aria/selection/src/useTypeSelect.ts

@@ -53,7 +53,7 @@ export function useTypeSelect(options: AriaTypeSelectOptions): TypeSelectAria {
 
   let onKeyDown = (e: KeyboardEvent) => {
     let character = getStringForKey(e.key);
-    if (!character || e.ctrlKey || e.metaKey || !e.currentTarget.contains(e.target as HTMLElement)) {
+    if (!character || e.ctrlKey || e.metaKey || !e.currentTarget.contains(e.target as HTMLElement) || (state.search.length === 0 && character === ' ')) {
       return;
     }
 

packages/react-aria-components/stories/Select.stories.tsx

@@ -66,6 +66,68 @@ export const SelectRenderProps = () => (
 
 let manyItems = [...Array(100)].map((_, i) => ({id: i, name: `Item ${i}`}));
 
+const usStateOptions = [
+  {id: 'AL', name: 'Alabama'},
+  {id: 'AK', name: 'Alaska'},
+  {id: 'AS', name: 'American Samoa'},
+  {id: 'AZ', name: 'Arizona'},
+  {id: 'AR', name: 'Arkansas'},
+  {id: 'CA', name: 'California'},
+  {id: 'CO', name: 'Colorado'},
+  {id: 'CT', name: 'Connecticut'},
+  {id: 'DE', name: 'Delaware'},
+  {id: 'DC', name: 'District Of Columbia'},
+  {id: 'FM', name: 'Federated States Of Micronesia'},
+  {id: 'FL', name: 'Florida'},
+  {id: 'GA', name: 'Georgia'},
+  {id: 'GU', name: 'Guam'},
+  {id: 'HI', name: 'Hawaii'},
+  {id: 'ID', name: 'Idaho'},
+  {id: 'IL', name: 'Illinois'},
+  {id: 'IN', name: 'Indiana'},
+  {id: 'IA', name: 'Iowa'},
+  {id: 'KS', name: 'Kansas'},
+  {id: 'KY', name: 'Kentucky'},
+  {id: 'LA', name: 'Louisiana'},
+  {id: 'ME', name: 'Maine'},
+  {id: 'MH', name: 'Marshall Islands'},
+  {id: 'MD', name: 'Maryland'},
+  {id: 'MA', name: 'Massachusetts'},
+  {id: 'MI', name: 'Michigan'},
+  {id: 'MN', name: 'Minnesota'},
+  {id: 'MS', name: 'Mississippi'},
+  {id: 'MO', name: 'Missouri'},
+  {id: 'MT', name: 'Montana'},
+  {id: 'NE', name: 'Nebraska'},
+  {id: 'NV', name: 'Nevada'},
+  {id: 'NH', name: 'New Hampshire'},
+  {id: 'NJ', name: 'New Jersey'},
+  {id: 'NM', name: 'New Mexico'},
+  {id: 'NY', name: 'New York'},
+  {id: 'NC', name: 'North Carolina'},
+  {id: 'ND', name: 'North Dakota'},
+  {id: 'MP', name: 'Northern Mariana Islands'},
+  {id: 'OH', name: 'Ohio'},
+  {id: 'OK', name: 'Oklahoma'},
+  {id: 'OR', name: 'Oregon'},
+  {id: 'PW', name: 'Palau'},
+  {id: 'PA', name: 'Pennsylvania'},
+  {id: 'PR', name: 'Puerto Rico'},
+  {id: 'RI', name: 'Rhode Island'},
+  {id: 'SC', name: 'South Carolina'},
+  {id: 'SD', name: 'South Dakota'},
+  {id: 'TN', name: 'Tennessee'},
+  {id: 'TX', name: 'Texas'},
+  {id: 'UT', name: 'Utah'},
+  {id: 'VT', name: 'Vermont'},
+  {id: 'VI', name: 'Virgin Islands'},
+  {id: 'VA', name: 'Virginia'},
+  {id: 'WA', name: 'Washington'},
+  {id: 'WV', name: 'West Virginia'},
+  {id: 'WI', name: 'Wisconsin'},
+  {id: 'WY', name: 'Wyoming'}
+];
+
 export const SelectManyItems = () => (
   <Select style={{position: 'relative'}}>
     <Label style={{display: 'block'}}>Test</Label>
@@ -77,7 +139,7 @@ export const SelectManyItems = () => (
       <OverlayArrow>
         <svg width={12} height={12}><path d="M0 0,L6 6,L12 0" /></svg>
       </OverlayArrow>
-      <ListBox items={manyItems} className={styles.menu}>
+      <ListBox items={usStateOptions} className={styles.menu}>
         {item => <MyListBoxItem>{item.name}</MyListBoxItem>}
       </ListBox>
     </Popover>

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

@@ -368,7 +368,50 @@ describe('Select', () => {
     await selectTester.selectOption({option: 'Kangaroo'});
     expect(trigger).toHaveTextContent('Kangaroo');
   });
-  
+
+  describe('typeahead', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('can select an option via typeahead', async function () {
+      let {getByTestId} = render(
+        <Select data-testid="select">
+          <Label>Favorite Animal</Label>
+          <Button>
+            <SelectValue />
+          </Button>
+          <Text slot="description">Description</Text>
+          <Text slot="errorMessage">Error</Text>
+          <Popover>
+            <ListBox>
+              <ListBoxItem>Australian Capital Territory</ListBoxItem>
+              <ListBoxItem>New South Wales</ListBoxItem>
+              <ListBoxItem>Northern Territory</ListBoxItem>
+              <ListBoxItem>Queensland</ListBoxItem>
+              <ListBoxItem>South Australia</ListBoxItem>
+              <ListBoxItem>Tasmania</ListBoxItem>
+              <ListBoxItem>Victoria</ListBoxItem>
+              <ListBoxItem>Western Australia</ListBoxItem>
+            </ListBox>
+          </Popover>
+        </Select>
+      );
+
+      let wrapper = getByTestId('select');
+      await user.tab();
+      await user.keyboard('Northern Terr');
+      let selectTester = testUtilUser.createTester('Select', {root: wrapper, interactionType: 'keyboard'});
+      let trigger = selectTester.trigger;
+      expect(trigger).toHaveTextContent('Northern Territory');
+      expect(trigger).not.toHaveAttribute('data-pressed');
+    });
+  });
+
   it('should support autoFocus', () => {
     let {getByTestId} = render(<TestSelect autoFocus />);
     let selectTester = testUtilUser.createTester('Select', {
@@ -425,7 +468,7 @@ describe('Select', () => {
 
   it('should not submit if required and selectedKey is null', async () => {
     const onSubmit = jest.fn().mockImplementation(e => e.preventDefault());
-  
+
     function Test() {
       const [selectedKey, setSelectedKey] = React.useState(null);
       return (
@@ -444,13 +487,13 @@ describe('Select', () => {
         </Form>
       );
     }
-  
+
     const {getByTestId} = render(<Test />);
     const wrapper = getByTestId('select');
     const selectTester = testUtilUser.createTester('Select', {root: wrapper});
     const trigger = selectTester.trigger;
     const submit = getByTestId('submit');
-  
+
     expect(trigger).toHaveTextContent('Select an item');
     await selectTester.selectOption({option: 'Cat'});
     expect(trigger).toHaveTextContent('Cat');