fix: ComboBox show all items on open

packages/components/package.json

@@ -35,6 +35,7 @@
     "@react-spectrum/theme-default": "^3.5.1",
     "@react-spectrum/toast": "^3.0.0-beta.16",
     "@react-spectrum/utils": "^3.11.5",
+    "@react-types/combobox": "3.13.1",
     "@react-types/radio": "^3.8.1",
     "@react-types/shared": "^3.22.1",
     "@react-types/textfield": "^3.9.1",

packages/components/src/spectrum/comboBox/ComboBox.tsx

@@ -10,7 +10,7 @@ import type { NormalizedItem } from '../utils';
 import { type PickerPropsT, usePickerProps } from '../picker';
 
 export type ComboBoxProps = PickerPropsT<SpectrumComboBoxProps<NormalizedItem>>;
-
+export { type MenuTriggerAction } from '@react-types/combobox';
 export { SpectrumComboBox };
 
 export const ComboBox = React.forwardRef(function ComboBox(

packages/components/src/spectrum/picker/usePickerScrollOnOpen.test.ts

@@ -49,9 +49,14 @@ describe('usePickerScrollOnOpen', () => {
     expect(result.current.ref).toBe(mockUsePopoverOnScrollRefResult.ref);
   });
 
-  it.each([true, false])(
-    'should return a callback that calls popoverOnOpenChange and onOpenChange: %s',
-    isOpen => {
+  it.each([
+    [true, undefined],
+    [false, undefined],
+    [true, 'input'],
+    [false, 'input'],
+  ] as const)(
+    'should return a callback that calls popoverOnOpenChange and onOpenChange: %s, %s',
+    (isOpen, menuTrigger) => {
       const { result } = renderHook(() =>
         usePickerScrollOnOpen({
           getInitialScrollPosition,
@@ -60,12 +65,12 @@ describe('usePickerScrollOnOpen', () => {
         })
       );
 
-      result.current.onOpenChange(isOpen);
+      result.current.onOpenChange(isOpen, menuTrigger);
 
       expect(mockUsePopoverOnScrollRefResult.onOpenChange).toHaveBeenCalledWith(
         isOpen
       );
-      expect(onOpenChange).toHaveBeenCalledWith(isOpen);
+      expect(onOpenChange).toHaveBeenCalledWith(isOpen, menuTrigger);
     }
   );
 });

packages/components/src/spectrum/picker/usePickerScrollOnOpen.ts

@@ -4,16 +4,17 @@ import {
   findSpectrumPickerScrollArea,
   usePopoverOnScrollRef,
 } from '@deephaven/react-hooks';
+import type { MenuTriggerAction } from '../comboBox';
 
 export interface UsePickerScrollOnOpenOptions {
   getInitialScrollPosition?: () => Promise<number | null | undefined>;
   onScroll: (event: Event) => void;
-  onOpenChange?: (isOpen: boolean) => void;
+  onOpenChange?: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void;
 }
 
 export interface UsePickerScrollOnOpenResult<THtml extends HTMLElement> {
   ref: DOMRef<THtml>;
-  onOpenChange: (isOpen: boolean) => void;
+  onOpenChange: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void;
 }
 
 /**
@@ -37,11 +38,11 @@ export function usePickerScrollOnOpen<THtml extends HTMLElement = HTMLElement>({
   );
 
   const onOpenChangeInternal = useCallback(
-    (isOpen: boolean): void => {
+    (isOpen: boolean, menuTrigger?: MenuTriggerAction): void => {
       // Attach scroll event handling
       popoverOnOpenChange(isOpen);
 
-      onOpenChange?.(isOpen);
+      onOpenChange?.(isOpen, menuTrigger);
     },
     [onOpenChange, popoverOnOpenChange]
   );

packages/jsapi-components/src/spectrum/ComboBox.tsx

@@ -1,9 +1,10 @@
 import {
   ComboBoxNormalized,
+  type MenuTriggerAction,
   type NormalizedItem,
   type SpectrumComboBoxProps,
 } from '@deephaven/components';
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { type PickerWithTableProps } from './PickerProps';
 import { usePickerProps } from './utils';
 
@@ -18,19 +19,57 @@ export function ComboBox(props: ComboBoxProps): JSX.Element {
     ...pickerProps
   } = usePickerProps<ComboBoxProps>(props);
 
+  const isOpenRef = useRef(false);
+  const inputValueRef = useRef('');
+
   const onInputChange = useCallback(
     (value: string) => {
       onInputChangeInternal?.(value);
-      onSearchTextChange(value);
+
+      // Only apply search text if ComboBox is open.
+      if (isOpenRef.current) {
+        onSearchTextChange(value);
+      }
+      // When the ComboBox is closed, `onInputChange` may have been called as a
+      // result of user search input, ComboBox selection, or by selected key
+      // prop changes. We can't determine the source here, so we clear the search
+      // text and store the search value so that the list is unfiltered the next
+      // time the ComboBox is opened. We also store the search value so we can
+      // re-apply it in `onOpenChange` if the ComboBox is opened by user search
+      // input.
+      else {
+        onSearchTextChange('');
+        inputValueRef.current = value;
+      }
     },
     [onInputChangeInternal, onSearchTextChange]
   );
 
+  const onOpenChange = useCallback(
+    (isOpen: boolean, menuTrigger?: MenuTriggerAction) => {
+      pickerProps.onOpenChange?.(isOpen);
+
+      // Reset the search text when the ComboBox is closed.
+      if (!isOpen) {
+        onSearchTextChange('');
+      }
+      // Restore search text when ComboBox has been opened by user input.
+      else if (menuTrigger === 'input') {
+        onSearchTextChange(inputValueRef.current);
+      }
+
+      // Store the open state so that `onInputChange` has access to it.
+      isOpenRef.current = isOpen;
+    },
+    [onSearchTextChange, pickerProps]
+  );
+
   return (
     <ComboBoxNormalized
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...pickerProps}
       onInputChange={onInputChange}
+      onOpenChange={onOpenChange}
     />
   );
 }