Fix typeahead in RAC ListBox (#5146)

Author: devongovett

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

@@ -17,6 +17,7 @@ import {Key, RefObject} from 'react';
 interface ListKeyboardDelegateOptions<T> {
   collection: Collection<Node<T>>,
   ref: RefObject<HTMLElement>,
+  collator?: Intl.Collator,
   layout?: 'stack' | 'grid',
   orientation?: Orientation,
   direction?: Direction,
@@ -27,7 +28,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
   private collection: Collection<Node<T>>;
   private disabledKeys: Set<Key>;
   private ref: RefObject<HTMLElement>;
-  private collator: Intl.Collator;
+  private collator: Intl.Collator | undefined;
   private layout: 'stack' | 'grid';
   private orientation?: Orientation;
   private direction?: Direction;
@@ -39,6 +40,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
       let opts = args[0] as ListKeyboardDelegateOptions<T>;
       this.collection = opts.collection;
       this.ref = opts.ref;
+      this.collator = opts.collator;
       this.disabledKeys = opts.disabledKeys || new Set();
       this.orientation = opts.orientation;
       this.direction = opts.direction;

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
+import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
 import {CollectionDocumentContext, CollectionPortal, CollectionProps, ItemProps, useCachedChildren, useCollection} from './Collection';
 import {ContextValue, forwardRefType, HiddenContext, Provider, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
 import {DragAndDropContext, DragAndDropHooks, DropIndicator, DropIndicatorContext, DropIndicatorProps} from './useDragAndDrop';
@@ -130,16 +130,18 @@ function ListBoxInner<T>({state, props, listBoxRef}: ListBoxInnerProps<T>) {
   let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState;
   let {direction} = useLocale();
   let {disabledBehavior, disabledKeys} = selectionManager;
+  let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let keyboardDelegate = useMemo(() => (
     props.keyboardDelegate || new ListKeyboardDelegate({
       collection,
+      collator,
       ref: listBoxRef,
       disabledKeys: disabledBehavior === 'selection' ? new Set<React.Key>() : disabledKeys,
       layout,
       orientation,
       direction
     })
-  ), [collection, listBoxRef, disabledBehavior, disabledKeys, orientation, direction, props.keyboardDelegate, layout]);
+  ), [collection, collator, listBoxRef, disabledBehavior, disabledKeys, orientation, direction, props.keyboardDelegate, layout]);
 
   let {listBoxProps} = useListBox({
     ...props,