handle async case with loading spinners

the collection might change to a loading state and thus have a size of 0. Dont reset focus first flag in that case

Author: LFDanLu

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

@@ -411,6 +411,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
 
   let updateActiveDescendant = useEffectEvent(() => {
     let keyToFocus = delegate.getFirstKey?.() ?? null;
+
     // If no focusable items exist in the list, make sure to clear any activedescendant that may still exist
     if (keyToFocus == null) {
       ref.current?.dispatchEvent(
@@ -419,27 +420,36 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
           bubbles: true
         })
       );
+    } else {
+      manager.setFocusedKey(keyToFocus);
+      // Only set shouldVirtualFocusFirst to false if we've successfully set the first key as the focused key
+      // If there wasn't a key to focus, we might be in a temporary loading state so we'll want to still focus the first key
+      // after the collection updates after load
+      shouldVirtualFocusFirst.current = false;
     }
-
-    manager.setFocusedKey(keyToFocus);
   });
 
   let lastCollection = useRef(manager.collection);
   useEffect(() => {
-    if (shouldVirtualFocusFirst.current && lastCollection !== manager.collection) {
+    if (shouldVirtualFocusFirst.current && lastCollection.current !== manager.collection) {
       updateActiveDescendant();
-      shouldVirtualFocusFirst.current = false;
     }
 
     lastCollection.current = manager.collection;
   }, [manager.collection, updateActiveDescendant]);
 
-  // TODO: need to track last key
-  useEffect(() => {
+  let resetFocusFirstFlag = useEffectEvent(() => {
     // If user causes the focused key to change in any other way, clear shouldVirtualFocusFirst so we don't
-    // accidentally move focus from under them
-    shouldVirtualFocusFirst.current = false;
-  }, [manager.focusedKey]);
+    // accidentally move focus from under them. Skip this if the collection was empty because we might be in a load
+    // state and will still want to focus the first item after load
+    if (manager.collection.size > 0) {
+      shouldVirtualFocusFirst.current = false;
+    }
+  });
+
+  useEffect(() => {
+    resetFocusFirstFlag();
+  }, [manager.focusedKey, resetFocusFirstFlag]);
 
   useEvent(ref, CLEAR_FOCUS_EVENT, !shouldUseVirtualFocus ? undefined : (e) => {
     e.stopPropagation();

packages/@react-stately/selection/src/types.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DisabledBehavior, FocusStrategy, Key, LongPressEvent, PressEvent, Selection, SelectionBehavior, SelectionMode} from '@react-types/shared';
+import {Collection, DisabledBehavior, FocusStrategy, Key, LongPressEvent, Node, PressEvent, Selection, SelectionBehavior, SelectionMode} from '@react-types/shared';
 
 
 export interface FocusState {
@@ -107,5 +107,6 @@ export interface MultipleSelectionManager extends FocusState {
   /** Returns whether the given key is a hyperlink. */
   isLink(key: Key): boolean,
   /** Returns the props for the given item. */
-  getItemProps(key: Key): any
+  getItemProps(key: Key): any,
+  collection: Collection<Node<unknown>>
 }

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

@@ -20,7 +20,6 @@ import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Ori
 import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {HeaderContext} from './Header';
-import {InternalAutocompleteContext} from './Autocomplete';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {SeparatorContext} from './Separator';
 import {TextContext} from './Text';

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

@@ -18,7 +18,6 @@ import {ContextValue, Provider, RenderProps, ScrollableProps, SlotProps, StylePr
 import {filterDOMProps, mergeRefs, useObjectRef, useResizeObserver} from '@react-aria/utils';
 import {FocusStrategy, forwardRefType, HoverEvents, Key, LinkDOMProps, MultipleSelection} from '@react-types/shared';
 import {HeaderContext} from './Header';
-import {InternalAutocompleteContext} from './Autocomplete';
 import {KeyboardContext} from './Keyboard';
 import {MultipleSelectionState, SelectionManager, useMultipleSelectionState} from '@react-stately/selection';
 import {OverlayTriggerStateContext} from './Dialog';

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

@@ -218,7 +218,12 @@ const AsyncExample = (args) => {
       };
     }
   });
-  let {onAction, onSelectionChange, selectionMode} = args;
+  let {onSelectionChange, selectionMode, includeLoadState} = args;
+  let renderEmptyState;
+  if (includeLoadState) {
+    renderEmptyState = list.isLoading ? () => 'Loading' : () => 'No results found.';
+  }
+
   return (
     <Autocomplete inputValue={list.filterText} onInputChange={list.setFilterText}>
       <div>
@@ -227,14 +232,14 @@ const AsyncExample = (args) => {
           <Input />
           <Text style={{display: 'block'}} slot="description">Please select an option below.</Text>
         </SearchField>
-        <Menu<AutocompleteItem>
-          items={list.items}
+        <ListBox<AutocompleteItem>
+          renderEmptyState={renderEmptyState}
+          items={includeLoadState && list.isLoading ? [] : list.items}
           className={styles.menu}
-          onAction={onAction}
           onSelectionChange={onSelectionChange}
           selectionMode={selectionMode}>
-          {item => <MyMenuItem>{item.name}</MyMenuItem>}
-        </Menu>
+          {item => <MyListBoxItem>{item.name}</MyListBoxItem>}
+        </ListBox>
       </div>
     </Autocomplete>
   );
@@ -244,7 +249,10 @@ export const AutocompleteAsyncLoadingExample = {
   render: (args) => {
     return <AsyncExample {...args} />;
   },
-  name: 'Autocomplete, useAsync level filtering'
+  name: 'Autocomplete, useAsync level filtering with load state',
+  args: {
+    includeLoadState: true
+  }
 };
 
 const CaseSensitiveFilter = (args) => {

packages/react-aria-components/test/AriaAutocomplete.test-util.tsx

@@ -45,8 +45,9 @@ interface AriaAutocompleteTestProps extends AriaBaseTestProps {
     disabledItems?: () => ReturnType<typeof render>,
     // should set a default value of "Ba" on the autocomplete. Uses the same collection items as the standard renderer
     defaultValue?: () => ReturnType<typeof render>,
-    // should allow the user to simply provide a list of items to the wrapped collection without a filter. Uses the same collection items as the standard renderer
-    noFilter?: () => ReturnType<typeof render>
+    // should allow the user to filter the items themselves in a async manner. The items should be Foo, Bar, and Baz with ids 1, 2, and 3 respectively.
+    // The filtering can take any amount of time but should be standard non-case sensitive contains matching
+    asyncFiltering?: () => ReturnType<typeof render>
     // TODO, add tests for this when we support it
     // submenus?: (props?: {name: string}) => ReturnType<typeof render>
   },
@@ -431,23 +432,38 @@ export const AriaAutocompleteTests = ({renderers, setup, prefix, ariaPattern = '
       });
     }
 
-    if (renderers.noFilter) {
-      describe('no filter function provided', function () {
-        it('should controlled items', async function () {
-          let {getByRole} = (renderers.noFilter!)();
+    if (renderers.asyncFiltering) {
+      describe('async filtering performed outside the autocomplete', function () {
+        it('should properly filter and autofocus the first item when typing forward', async function () {
+          let {getByRole} = (renderers.asyncFiltering!)();
+          await act(async () => {
+            jest.runAllTimers();
+          });
+
+
           let input = getByRole('searchbox');
           expect(input).toHaveValue('');
           let menu = getByRole(collectionNodeRole);
           let options = within(menu).getAllByRole(collectionItemRole);
           expect(options).toHaveLength(3);
 
+          // Does not immediately set aria-activedescendant until the collection updates
           await user.tab();
           expect(document.activeElement).toBe(input);
           await user.keyboard('F');
-          act(() => jest.runAllTimers());
+          expect(input).not.toHaveAttribute('aria-activedescendant');
+
+          await act(async () => {
+            jest.advanceTimersToNextTimer();
+          });
           options = within(menu).getAllByRole(collectionItemRole);
-          expect(options).toHaveLength(3);
+          expect(options).toHaveLength(1);
           expect(options[0]).toHaveTextContent('Foo');
+          expect(input).not.toHaveAttribute('aria-activedescendant');
+
+          // Only sets aria-activedescendant after the collection updates and the delay passes
+          act(() => jest.advanceTimersToNextTimer());
+          expect(input).toHaveAttribute('aria-activedescendant', options[0].id);
         });
       });
     }

packages/react-aria-components/test/Autocomplete.test.tsx

@@ -14,6 +14,7 @@ import {AriaAutocompleteTests} from './AriaAutocomplete.test-util';
 import {Header, Input, Label, ListBox, ListBoxItem, ListBoxSection, Menu, MenuItem, MenuSection, SearchField, Separator, Text, UNSTABLE_Autocomplete} from '..';
 import React, {ReactNode} from 'react';
 import {render} from '@react-spectrum/test-utils-internal';
+import {useAsyncList} from 'react-stately';
 import {useFilter} from '@react-aria/i18n';
 
 interface AutocompleteItem {
@@ -99,7 +100,7 @@ let ListBoxWithSections = (props) => (
   </ListBox>
 );
 
-let AutocompleteWrapper = ({autocompleteProps = {}, inputProps = {}, children}: {autocompleteProps?: any, inputProps?: any, collectionProps?: any, children?: ReactNode}) => {
+let AutocompleteWrapper = ({autocompleteProps = {}, inputProps = {}, children}: {autocompleteProps?: any, inputProps?: any, children?: ReactNode}) => {
   let {contains} = useFilter({sensitivity: 'base'});
   let filter = (textValue, inputValue) => contains(textValue, inputValue);
 
@@ -115,7 +116,7 @@ let AutocompleteWrapper = ({autocompleteProps = {}, inputProps = {}, children}:
   );
 };
 
-let ControlledAutocomplete = ({autocompleteProps = {}, inputProps = {}, children}: {autocompleteProps?: any, inputProps?: any, collectionProps?: any, children?: ReactNode}) => {
+let ControlledAutocomplete = ({autocompleteProps = {}, inputProps = {}, children}: {autocompleteProps?: any, inputProps?: any, children?: ReactNode}) => {
   let [inputValue, setInputValue] = React.useState('');
   let {contains} = useFilter({sensitivity: 'base'});
   let filter = (textValue, inputValue) => contains(textValue, inputValue);
@@ -132,6 +133,47 @@ let ControlledAutocomplete = ({autocompleteProps = {}, inputProps = {}, children
   );
 };
 
+let AsyncFiltering = ({autocompleteProps = {}, inputProps = {}}: {autocompleteProps?: any, inputProps?: any, children?: ReactNode}) => {
+  let list = useAsyncList<AutocompleteItem>({
+    async load({filterText}) {
+      let json = await new Promise(resolve => {
+        setTimeout(() => {
+          resolve(filterText ? items.filter(item => {
+            let name = item.name.toLowerCase();
+            for (let filterChar of filterText.toLowerCase()) {
+              if (!name.includes(filterChar)) {
+                return false;
+              }
+              name = name.replace(filterChar, '');
+            }
+            return true;
+          }) : items);
+        }, 300);
+      }) as AutocompleteItem[];
+
+      return {
+        items: json
+      };
+    }
+  });
+
+  return (
+    <UNSTABLE_Autocomplete inputValue={list.filterText} onInputChange={list.setFilterText} {...autocompleteProps}>
+      <SearchField {...inputProps}>
+        <Label style={{display: 'block'}}>Test</Label>
+        <Input />
+        <Text style={{display: 'block'}} slot="description">Please select an option below.</Text>
+      </SearchField>
+      <Menu
+        items={list.items}
+        onAction={onAction}
+        onSelectionChange={onSelectionChange}>
+        {item => <MenuItem id={item.id}>{item.name}</MenuItem>}
+      </Menu>
+    </UNSTABLE_Autocomplete>
+  );
+};
+
 AriaAutocompleteTests({
   prefix: 'rac-static-menu',
   renderers: {
@@ -174,11 +216,6 @@ AriaAutocompleteTests({
       <AutocompleteWrapper autocompleteProps={{defaultInputValue: 'Ba'}}>
         <StaticMenu />
       </AutocompleteWrapper>
-    ),
-    customFiltering: () => render(
-      <AutocompleteWrapper autocompleteProps={{filter: () => true}}>
-        <StaticMenu />
-      </AutocompleteWrapper>
     )
   },
   actionListener: onAction,
@@ -192,6 +229,9 @@ AriaAutocompleteTests({
       <AutocompleteWrapper>
         <DynamicMenu />
       </AutocompleteWrapper>
+    ),
+    asyncFiltering: () => render(
+      <AsyncFiltering />
     )
   }
 });
@@ -233,11 +273,6 @@ AriaAutocompleteTests({
       <AutocompleteWrapper autocompleteProps={{defaultInputValue: 'Ba'}}>
         <StaticListbox />
       </AutocompleteWrapper>
-    ),
-    noFilter: () => render(
-      <AutocompleteWrapper autocompleteProps={{filter: null}}>
-        <StaticListbox />
-      </AutocompleteWrapper>
     )
   },
   ariaPattern: 'listbox',