Fixing typeselect for falsy key values (#1123)

Author: LFDanLu

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

@@ -68,9 +68,11 @@ export function useTypeSelect(options: TypeSelectOptions): TypeSelectAria {
     let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);
 
     // If no key found, search from the top.
-    key = key || keyboardDelegate.getKeyForSearch(state.search);
+    if (key == null) {
+      key = keyboardDelegate.getKeyForSearch(state.search);
+    }
 
-    if (key) {
+    if (key != null) {
       selectionManager.setFocusedKey(key);
       if (onTypeSelect) {
         onTypeSelect(key);
@@ -86,7 +88,7 @@ export function useTypeSelect(options: TypeSelectOptions): TypeSelectAria {
   return {
     typeSelectProps: {
       // Using a capturing listener to catch the keydown event before
-      // other hooks in order to handle the Spacebar event. 
+      // other hooks in order to handle the Spacebar event.
       onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : null
     }
   };

packages/@react-aria/table/src/TableKeyboardDelegate.ts

@@ -405,7 +405,7 @@ export class TableKeyboardDelegate<T> implements KeyboardDelegate {
     }
 
     let hasWrapped = false;
-    while (key) {
+    while (key != null) {
       let item = collection.getItem(key);
 
       // Check each of the row header cells in this row for a match

packages/@react-spectrum/picker/test/Picker.test.js

@@ -1481,6 +1481,7 @@ describe('Picker', function () {
             <Item key="one">One</Item>
             <Item key="two">Two</Item>
             <Item key="three">Three</Item>
+            <Item key="">None</Item>
           </Picker>
         </Provider>
       );
@@ -1493,7 +1494,7 @@ describe('Picker', function () {
 
       let listbox = getByRole('listbox');
       let items = within(listbox).getAllByRole('option');
-      expect(items.length).toBe(3);
+      expect(items.length).toBe(4);
       expect(items[0]).toHaveTextContent('One');
       expect(items[1]).toHaveTextContent('Two');
       expect(items[2]).toHaveTextContent('Three');
@@ -1517,6 +1518,22 @@ describe('Picker', function () {
 
       expect(document.activeElement).toBe(picker);
       expect(picker).toHaveTextContent('Three');
+
+      act(() => jest.advanceTimersByTime(500));
+      act(() => picker.focus());
+      act(() => {fireEvent.keyDown(picker, {key: 'ArrowDown'});});
+      act(() => jest.runAllTimers());
+      listbox = getByRole('listbox');
+      items = within(listbox).getAllByRole('option');
+      expect(document.activeElement).toBe(items[2]);
+      act(() => {fireEvent.keyDown(listbox, {key: 'n'});});
+      act(() => {fireEvent.keyDown(document.activeElement, {key: 'Enter'});});
+      act(() => {fireEvent.keyUp(document.activeElement, {key: 'Enter'});});
+      act(() => jest.runAllTimers());
+      expect(listbox).not.toBeInTheDocument();
+      expect(picker).toHaveTextContent('None');
+      expect(onSelectionChange).toHaveBeenCalledTimes(2);
+      expect(onSelectionChange).toHaveBeenLastCalledWith('');
     });
 
     it('does not deselect when pressing an already selected item', function () {