adding tests, make sure we only apply autocomplete attributes if the wrapped collection is filterable

Author: LFDanLu

packages/@react-aria/autocomplete/src/useAutocomplete.ts

@@ -13,7 +13,7 @@
 import {AriaLabelingProps, BaseEvent, DOMProps, Node, RefObject} from '@react-types/shared';
 import {AriaTextFieldProps} from '@react-aria/textfield';
 import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
-import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isCtrlKeyPressed, mergeProps, mergeRefs, useEffectEvent, useEvent, useId, useLabels, useObjectRef} from '@react-aria/utils';
+import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isCtrlKeyPressed, mergeProps, mergeRefs, useEffectEvent, useEvent, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
 import {dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement, moveVirtualFocus} from '@react-aria/focus';
 import {getInteractionModality} from '@react-aria/interactions';
 // @ts-ignore
@@ -28,7 +28,7 @@ export interface CollectionOptions extends DOMProps, AriaLabelingProps {
   disallowTypeAhead: boolean
 }
 
-// TODO: is in beta so technically could replace textValue with Node if we are comfortable with that
+// TODO; For now go with Node here, but maybe pare it down to just the essentials? Value, key, and maybe type?
 export interface AriaAutocompleteProps extends AutocompleteProps {
   /**
    * An optional filter function used to determine if a option should be included in the autocomplete list.
@@ -57,7 +57,6 @@ export interface AutocompleteAria {
   collectionProps: CollectionOptions,
   /** Ref to attach to the wrapped collection. */
   collectionRef: RefObject<HTMLElement | null>,
-  // TODO: same as above, replace nodeTextValue?
   /** A filter function that returns if the provided collection node should be filtered out of the collection. */
   filter?: (nodeTextValue: string, node: Node<unknown>) => boolean
 }
@@ -76,7 +75,7 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Autocompl
     disableAutoFocusFirst = false
   } = props;
 
-  let collectionId = useId();
+  let collectionId = useSlotId();
   let timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   let delayNextActiveDescendant = useRef(false);
   let queuedActiveDescendant = useRef<string | null>(null);
@@ -355,13 +354,19 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Autocompl
     }
   };
 
-  return {
-    textFieldProps: {
-      value: state.inputValue,
-      onChange,
+  // Only apply the autocomplete specific behaviors if the collection component wrapped by it is actually
+  // being filtered/allows filtering by the Autocomplete.
+  let textFieldProps = {
+    value: state.inputValue,
+    onChange
+  } as AriaTextFieldProps<HTMLInputElement>;
+
+  if (collectionId) {
+    textFieldProps = {
+      ...textFieldProps,
       onKeyDown,
       autoComplete: 'off',
-      'aria-haspopup': 'listbox',
+      'aria-haspopup': collectionId ? 'listbox' : undefined,
       'aria-controls': collectionId,
       // TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)
       'aria-autocomplete': 'list',
@@ -373,7 +378,11 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Autocompl
       enterKeyHint: 'go',
       onBlur,
       onFocus
-    },
+    };
+  }
+
+  return {
+    textFieldProps,
     collectionProps: mergeProps(collectionProps, {
       shouldUseVirtualFocus,
       disallowTypeAhead: true

packages/@react-aria/collections/src/BaseCollection.ts

@@ -282,7 +282,7 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
     this.frozen = !isSSR;
   }
 
-  filter(filterFn: FilterFn, newCollection?: BaseCollection<T>): BaseCollection<T> {
+  filter(filterFn: FilterFn<T>, newCollection?: BaseCollection<T>): BaseCollection<T> {
     if (newCollection == null) {
       newCollection = new BaseCollection<T>();
     }
@@ -294,7 +294,7 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
   }
 }
 
-function filterChildren<T>(collection: BaseCollection<T>, newCollection: BaseCollection<T>, firstChildKey: Key | null, filterFn: FilterFn): [Key | null, Key | null] {
+function filterChildren<T>(collection: BaseCollection<T>, newCollection: BaseCollection<T>, firstChildKey: Key | null, filterFn: FilterFn<T>): [Key | null, Key | null] {
   // loop over the siblings for firstChildKey
   // create new nodes based on calling node.filter for each child
   // if it returns null then don't include it, otherwise update its prev/next keys

packages/@react-aria/collections/src/CollectionBuilder.tsx

@@ -164,6 +164,7 @@ function useSSRCollectionNode<T extends Element>(CollectionNodeClass: Collection
   return <CollectionNodeClass.type ref={itemRef}>{children}</CollectionNodeClass.type>;
 }
 
+// TODO: have it still accept a string along side a collectionNodeClass, just have it default to a base node class if so
 // TODO: check the signature of the CollectionNodeClass here and other places (aka useSSRCollectionNode and branchCompoennt). If I use the generic it complains. Perhaps it should be unknown? Or maybe the definitions in Listbox and stuff shouldn't use a generic?
 export function createLeafComponent<T extends object, P extends object, E extends Element>(CollectionNodeClass: CollectionNodeClass<any>, render: (props: P, ref: ForwardedRef<E>) => ReactElement | null): (props: P & React.RefAttributes<T>) => ReactElement | null;
 export function createLeafComponent<T extends object, P extends object, E extends Element>(CollectionNodeClass: CollectionNodeClass<any>, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement | null): (props: P & React.RefAttributes<T>) => ReactElement | null;

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

@@ -106,7 +106,9 @@ interface GridListInnerProps<T extends object> {
 function GridListInner<T extends object>({props, collection, gridListRef: ref}: GridListInnerProps<T>) {
   // TODO: for now, don't grab collection ref and collectionProps from the autocomplete, rely on the user tabbing to the gridlist
   // figure out if we want to support virtual focus for grids when wrapped in an autocomplete
-  let {filter} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  let {filter, collectionProps} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let {shouldUseVirtualFocus, disallowTypeAhead, ...DOMCollectionProps} = collectionProps || {};
   let {dragAndDropHooks, keyboardNavigationBehavior = 'arrow', layout = 'stack'} = props;
   let {CollectionRoot, isVirtualized, layoutDelegate, dropTargetDelegate: ctxDropTargetDelegate} = useContext(CollectionRendererContext);
   let gridlistState = useListState({
@@ -135,6 +137,7 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
 
   let {gridProps} = useGridList({
     ...props,
+    ...DOMCollectionProps,
     keyboardDelegate,
     // Only tab navigation is supported in grid layout.
     keyboardNavigationBehavior: layout === 'grid' ? 'tab' : keyboardNavigationBehavior,

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

@@ -375,7 +375,9 @@ interface TableInnerProps {
 
 
 function TableInner({props, forwardedRef: ref, selectionState, collection}: TableInnerProps) {
-  let {filter} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  let {filter, collectionProps} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let {shouldUseVirtualFocus, disallowTypeAhead, ...DOMCollectionProps} = collectionProps || {};
   let tableContainerContext = useContext(ResizableTableContainerContext);
   ref = useObjectRef(useMemo(() => mergeRefs(ref, tableContainerContext?.tableRef), [ref, tableContainerContext?.tableRef]));
   let tableState = useTableState({
@@ -390,6 +392,7 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
   let {dragAndDropHooks} = props;
   let {gridProps} = useTable({
     ...props,
+    ...DOMCollectionProps,
     layoutDelegate,
     isVirtualized
   }, filteredState, ref);

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

@@ -75,7 +75,9 @@ interface TagGroupInnerProps {
 }
 
 function TagGroupInner({props, forwardedRef: ref, collection}: TagGroupInnerProps) {
-  let {filter} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  let {filter, collectionProps} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let {shouldUseVirtualFocus, disallowTypeAhead, ...DOMCollectionProps} = collectionProps || {};
   let tagListRef = useRef<HTMLDivElement>(null);
   let [labelRef, label] = useSlot(
     !props['aria-label'] && !props['aria-labelledby']
@@ -99,6 +101,7 @@ function TagGroupInner({props, forwardedRef: ref, collection}: TagGroupInnerProp
   } = useTagGroup({
     ...props,
     ...domPropOverrides,
+    ...DOMCollectionProps,
     label
   }, filteredState, tagListRef);
 

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

@@ -13,7 +13,7 @@
 import {AriaTreeItemOptions, AriaTreeProps, DraggableItemResult, DropIndicatorAria, DropIndicatorProps, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing,  useGridListSelectionCheckbox, useHover, useId, useLocale, useTree, useTreeItem, useVisuallyHidden} from 'react-aria';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
-import {Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, useCachedChildren} from '@react-aria/collections';
+import {Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, FilterLessNode, useCachedChildren} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection';
 import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DisabledBehavior, DragPreviewRenderer, Expandable, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, MultipleSelection, PressEvents, RefObject, SelectionMode} from '@react-types/shared';
@@ -448,7 +448,7 @@ export interface TreeItemContentRenderProps extends TreeItemRenderProps {}
 // need to do a bunch of check to figure out what is the Content and what are the actual collection elements (aka child rows) of the TreeItem
 export interface TreeItemContentProps extends Pick<RenderProps<TreeItemContentRenderProps>, 'children'> {}
 
-class TreeContentNode extends CollectionNode<any> {
+class TreeContentNode extends FilterLessNode<any> {
   static readonly type = 'content';
 
   constructor(key: Key) {
@@ -491,8 +491,7 @@ export interface TreeItemProps<T = object> extends StyleRenderProps<TreeItemRend
   onAction?: () => void
 }
 
-// TODO: also might be able to reuse the ItemNode
-class TreeItemNode extends CollectionNode<any> {
+class TreeItemNode extends FilterLessNode<any> {
   static readonly type = 'item';
 
   constructor(key: Key) {
@@ -736,8 +735,7 @@ export interface TreeLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'coll
   isLoading?: boolean
 }
 
-// TODO: can reuse this most likely
-class TreeLoaderNode extends CollectionNode<any> {
+class TreeLoaderNode extends FilterLessNode<any> {
   static readonly type = 'loader';
 
   constructor(key: Key) {

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

@@ -19,7 +19,6 @@ import {MyListBoxLoaderIndicator, renderEmptyState} from './ListBox.stories';
 import {MyTag} from './TagGroup.stories';
 import React from 'react';
 import styles from '../example/index.css';
-import {TreeExampleStaticRender} from './Tree.stories';
 import {useAsyncList, useListData, useTreeData} from 'react-stately';
 import {useFilter} from 'react-aria';
 import './styles.css';