fix tests and pass submenutrigger node to filterFn

Author: LFDanLu

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

@@ -116,9 +116,9 @@ class SubmenuTriggerNode<T> extends CollectionNode<T> {
 
   filter(collection: BaseCollection<T>, newCollection: BaseCollection<T>, filterFn: (textValue: string, node: Node<T>) => boolean): CollectionNode<T> | null {
     let triggerNode = collection.getItem(this.firstChildKey!);
-    if (triggerNode && filterFn(triggerNode.textValue, triggerNode)) {
-      // TODO: perhaps should call super.filter for correctness, but basically add the menu item child of the submenutrigger
-      // to the keymap so it renders
+    // Note that this provides the SubmenuTrigger node rather than the MenuItemNode it wraps to the filter function. Probably more useful
+    // because that node has the proper parentKey information (aka the section if any, the menu item will just point to the SubmenuTrigger node)
+    if (triggerNode && filterFn(triggerNode.textValue, this)) {
       newCollection.addNode(triggerNode as CollectionNode<T>);
       return this.clone();
     }

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

@@ -12,17 +12,17 @@
 
 import {action} from '@storybook/addon-actions';
 import {Autocomplete, Button, Cell, Collection, Column, DialogTrigger, GridList, Header, Input, Keyboard, Label, ListBox, ListBoxSection, ListLayout, Menu, MenuItem, MenuSection, MenuTrigger, OverlayArrow, Popover, Row, SearchField, Select, SelectValue, Separator, SubmenuTrigger, Table, TableBody, TableHeader, TableLayout, TagGroup, TagList, Text, TextField, Tooltip, TooltipTrigger, Virtualizer} from 'react-aria-components';
+import {LoadingSpinner, MyListBoxItem, MyMenuItem} from './utils';
 import {Meta, StoryObj} from '@storybook/react';
 import {MyCheckbox} from './Table.stories';
-import {MyListBoxItem, MyMenuItem} from './utils';
-import {MyListBoxLoaderIndicator, renderEmptyState} from './ListBox.stories';
+import {MyGridListItem} from './GridList.stories';
+import {MyListBoxLoaderIndicator} from './ListBox.stories';
 import {MyTag} from './TagGroup.stories';
-import React from 'react';
+import React, {useState} from 'react';
 import styles from '../example/index.css';
 import {useAsyncList, useListData, useTreeData} from 'react-stately';
 import {useFilter} from 'react-aria';
 import './styles.css';
-import {MyGridListItem} from './GridList.stories';
 
 export default {
   title: 'React Aria Components/Autocomplete',
@@ -868,8 +868,23 @@ interface Character {
   birth_year: number
 }
 
+let renderEmptyState = (list, cursor) => {
+  let emptyStateContent;
+  if (list.loadingState === 'loading') {
+    emptyStateContent = <LoadingSpinner style={{height: 20, width: 20, transform: 'translate(-50%, -50%)'}} />;
+  } else if (list.loadingState === 'idle' && !cursor) {
+    emptyStateContent = 'No results';
+  }
+  return  (
+    <div style={{height: 30, width: '100%'}}>
+      {emptyStateContent}
+    </div>
+  );
+};
+
 
 export const AutocompleteWithAsyncListBox = (args) => {
+  let [cursor, setCursor] = useState(null);
   let list = useAsyncList<Character>({
     async load({signal, cursor, filterText}) {
       if (cursor) {
@@ -879,6 +894,7 @@ export const AutocompleteWithAsyncListBox = (args) => {
       await new Promise(resolve => setTimeout(resolve, args.delay));
       let res = await fetch(cursor || `https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
       let json = await res.json();
+      setCursor(json.next);
       return {
         items: json.results,
         cursor: json.next
@@ -913,7 +929,7 @@ export const AutocompleteWithAsyncListBox = (args) => {
               display: 'flex'
             }}
             aria-label="async virtualized listbox"
-            renderEmptyState={() => renderEmptyState({isLoading: list.isLoading})}>
+            renderEmptyState={() => renderEmptyState(list, cursor)}>
             <Collection items={list.items}>
               {(item: Character) => (
                 <MyListBoxItem
@@ -1075,10 +1091,10 @@ export const AutocompleteWithTagGroup = () => {
   );
 };
 
-function AutocompletePreserveFirstSection(args) {
+function AutocompleteNodeFiltering(args) {
   let {contains} = useFilter({sensitivity: 'base'});
   let filter = (textValue, inputValue, node) => {
-    if (node.parentKey === 'Section 1') {
+    if ((node.parentKey === 'Section 1' && textValue === 'Open View') || (node.parentKey === 'Section 2' && textValue === 'Appearance')) {
       return true;
     }
     return contains(textValue, inputValue);
@@ -1101,6 +1117,11 @@ function AutocompletePreserveFirstSection(args) {
 }
 
 export const AutocompletePreserveFirstSectionStory: AutocompleteStory = {
-  render: (args) => <AutocompletePreserveFirstSection {...args} />,
-  name: 'Autocomplete, never filter first section'
+  render: (args) => <AutocompleteNodeFiltering {...args} />,
+  name: 'Autocomplete, per node filtering',
+  parameters: {
+    description: {
+      data: 'It should never filter out Open View or Appearance'
+    }
+  }
 };

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

@@ -282,10 +282,6 @@ let StaticBreadcrumbs = (props) => (
     <Breadcrumb>Baz</Breadcrumb>
   </Breadcrumbs>
 );
-// TODO: add GridList, Table, TagGroup make sure that it filters and doesn't have virtual focus
-// Also test that it doesn't filter Tabs, Tree, Breadcrumbs
-// Also test that it can do node specific filtering
-
 
 let AutocompleteWrapper = ({autocompleteProps = {}, inputProps = {}, children}: {autocompleteProps?: any, inputProps?: any, children?: ReactNode}) => {
   let {contains} = useFilter({sensitivity: 'base'});
@@ -362,6 +358,28 @@ let AsyncFiltering = ({autocompleteProps = {}, inputProps = {}}: {autocompletePr
   );
 };
 
+let CustomFiltering = ({autocompleteProps = {}, inputProps = {}, children}: {autocompleteProps?: any, inputProps?: any, children?: ReactNode}) => {
+  let [inputValue, setInputValue] = React.useState('');
+  let {contains} = useFilter({sensitivity: 'base'});
+  let filter = (textValue, inputValue, node) => {
+    if (node.parentKey === 'sec1') {
+      return true;
+    }
+    return contains(textValue, inputValue);
+  };
+
+  return (
+    <Autocomplete inputValue={inputValue} onInputChange={setInputValue} filter={filter} {...autocompleteProps}>
+      <SearchField {...inputProps}>
+        <Label style={{display: 'block'}}>Test</Label>
+        <Input />
+        <Text style={{display: 'block'}} slot="description">Please select an option below.</Text>
+      </SearchField>
+      {children}
+    </Autocomplete>
+  );
+};
+
 describe('Autocomplete', () => {
   let user;
   beforeAll(() => {
@@ -896,9 +914,9 @@ describe('Autocomplete', () => {
     );
 
     let wrappedComponent = getByTestId('wrapped');
-    expect(within(wrappedComponent).findByText('Foo')).toBeTruthy();
-    expect(within(wrappedComponent).findByText('Bar')).toBeTruthy();
-    expect(within(wrappedComponent).findByText('Baz')).toBeTruthy();
+    expect(await within(wrappedComponent).findByText('Foo')).toBeTruthy();
+    expect(await within(wrappedComponent).findByText('Bar')).toBeTruthy();
+    expect(await within(wrappedComponent).findByText('Baz')).toBeTruthy();
 
     let input = getByRole('searchbox');
     await user.tab();
@@ -909,9 +927,35 @@ describe('Autocomplete', () => {
     expect(input).not.toHaveAttribute('aria-autocomplete');
     expect(input).not.toHaveAttribute('aria-activedescendant');
 
-    expect(within(wrappedComponent).findByText('Foo')).toBeTruthy();
-    expect(within(wrappedComponent).findByText('Bar')).toBeTruthy();
-    expect(within(wrappedComponent).findByText('Baz')).toBeTruthy();
+    expect(await within(wrappedComponent).findByText('Foo')).toBeTruthy();
+    expect(await within(wrappedComponent).findByText('Bar')).toBeTruthy();
+    expect(await within(wrappedComponent).findByText('Baz')).toBeTruthy();
+  });
+
+  it('should allow user to filter by node information', async () => {
+    let {getByRole} = render(
+      <CustomFiltering>
+        <MenuWithSections />
+      </CustomFiltering>
+    );
+
+    let input = getByRole('searchbox');
+    await user.tab();
+    expect(document.activeElement).toBe(input);
+    let menu = getByRole('menu');
+    let sections = within(menu).getAllByRole('group');
+    expect(sections.length).toBe(2);
+    let options = within(menu).getAllByRole('menuitem');
+    expect(options).toHaveLength(6);
+
+    await user.keyboard('Copy');
+    sections = within(menu).getAllByRole('group');
+    options = within(menu).getAllByRole('menuitem');
+    expect(options).toHaveLength(4);
+    expect(within(sections[0]).getByText('Foo')).toBeTruthy();
+    expect(within(sections[0]).getByText('Bar')).toBeTruthy();
+    expect(within(sections[0]).getByText('Baz')).toBeTruthy();
+    expect(within(sections[1]).getByText('Copy')).toBeTruthy();
   });
 });