Use configurable filterKey to filter nested sections

packages/@react-spectrum/listbox/stories/ListBox.stories.tsx

@@ -11,7 +11,7 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {ActionGroup, AlertDialog, Avatar, Button, DialogContainer, Flex, Text} from '@adobe/react-spectrum';
+import {ActionGroup, AlertDialog, Avatar, Button, DialogContainer, Flex, Text, useFilter} from '@adobe/react-spectrum';
 import AlignCenter from '@spectrum-icons/workflow/AlignCenter';
 import AlignLeft from '@spectrum-icons/workflow/AlignLeft';
 import AlignRight from '@spectrum-icons/workflow/AlignRight';
@@ -26,7 +26,7 @@ import {Label} from '@react-spectrum/label';
 import Paste from '@spectrum-icons/workflow/Paste';
 import React, {useRef, useState} from 'react';
 import {TranslateListBox} from './../chromatic/ListBoxLanguages.chromatic';
-import {useAsyncList, useTreeData} from '@react-stately/data';
+import {useAsyncList, useListData, useTreeData} from '@react-stately/data';
 
 let iconMap = {
   AlignCenter,
@@ -1043,3 +1043,36 @@ export const WithAvatars = {
     </StoryDecorator>
   )]
 };
+
+
+export const FilterableListBox = {
+  render: () => <SearchableListBox />,
+  decorators: null,
+  name: 'filterable listbox'
+};
+
+function SearchableListBox() {
+
+  const {contains} = useFilter({sensitivity: 'base'});
+
+  const list = useListData({
+    initialItems: withSection,
+    filterKey: 'children',
+    filter: (item, text) => {
+      return contains(item.name, text);
+    }
+  });
+
+  return (
+    <>
+      <input type="text" onChange={(e) => list.setFilterText(e.target.value)} />
+      <ListBox width="150px" items={list.items} aria-labelledby="labelSearchableListBox">
+        {(item) => (
+          <Section key={item.name} items={item.children} title={item.name}>
+            {(item) => <Item key={item.name}>{item.name}</Item>}
+          </Section>
+        )}
+      </ListBox >
+    </>
+  );
+}

packages/@react-stately/data/src/useListData.ts

@@ -23,7 +23,9 @@ export interface ListOptions<T> {
   /** A function that returns a unique key for an item object. */
   getKey?: (item: T) => Key,
   /** A function that returns whether a item matches the current filter text. */
-  filter?: (item: T, filterText: string) => boolean
+  filter?: (item: T, filterText: string) => boolean,
+  /** The key of the item that contains the nested items it should filter. */
+  filterKey?: string
 }
 
 export interface ListData<T> {
@@ -142,6 +144,7 @@ export function useListData<T>(options: ListOptions<T>): ListData<T> {
     initialSelectedKeys,
     getKey = (item: any) => item.id || item.key,
     filter,
+    filterKey,
     initialFilterText = ''
   } = options;
 
@@ -152,13 +155,13 @@ export function useListData<T>(options: ListOptions<T>): ListData<T> {
     filterText: initialFilterText
   });
 
-  const filterItems = (items: T[], filterText: string): T[] => {
+  const filterItems = (items: T[], filterText: string, key: string): T[] => {
     return items.reduce((acc: T[], item: any) => {
-      if (item.children) {
+      if (item[key]) {
         if (filter(item, filterText)) {
           acc.push(item);
         } else {
-          const children = filterItems(item.children, filterText);
+          const children = filterItems(item[key], filterText, key);
           if (children.length > 0) {
             acc.push({...item, children});
           }
@@ -171,7 +174,7 @@ export function useListData<T>(options: ListOptions<T>): ListData<T> {
   };
 
   let filteredItems = useMemo(
-    () => (filter ? filterItems(state.items, state.filterText) : state.items),
+    () => (filter ? filterItems(state.items, state.filterText, filterKey) : state.items),
     [state.items, state.filterText, filter]
   );
 

packages/@react-stately/data/test/useListData.test.js

@@ -821,7 +821,7 @@ describe('useListData', function () {
   });
 
   it('should support filtering items across sections', function () {
-    let {result} = renderHook(() => useListData({initialItems: grouped, getKey, filter, initialFilterText: 'Child 1'}));
+    let {result} = renderHook(() => useListData({initialItems: grouped, getKey, filter, initialFilterText: 'Child 1', filterKey: 'children'}));
 
     expect(result.current.items).toEqual([
       {name: 'One', children: [{name: 'Child 1'}]},