WIP: ComboBox show all items on open (DH-18088)

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/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,48 @@ export function ComboBox(props: ComboBoxProps): JSX.Element {
     ...pickerProps
   } = usePickerProps<ComboBoxProps>(props);
 
+  const menuTriggerActionRef = useRef<MenuTriggerAction>();
+
   const onInputChange = useCallback(
     (value: string) => {
       onInputChangeInternal?.(value);
+
       onSearchTextChange(value);
+
+      // const searchText = menuTriggerActionRef.current === 'input' ? value : '';
+
+      console.log('[TESTING]', menuTriggerActionRef.current, value);
+
+      // We want the ComboBox to show all items whenever it is initially opened,
+      // so keep search text set to empty string while it is closed. This is
+      // mostly to handle the intial state, since `onInputChange` gets called
+      // before the user has interacted.
+      // onSearchTextChange(isOpenRef.current ? value : '');
     },
     [onInputChangeInternal, onSearchTextChange]
   );
 
+  const onOpenChange = useCallback(
+    (isOpen: boolean, menuTrigger?: MenuTriggerAction) => {
+      console.log('[TESTING] onOpenChange', isOpen, menuTrigger);
+      menuTriggerActionRef.current = isOpen ? menuTrigger : undefined;
+
+      pickerProps.onOpenChange?.(isOpen);
+
+      // Clear filtering on close so that all items show on next open
+      if (!isOpen) {
+        onSearchTextChange('');
+      }
+    },
+    [onSearchTextChange, pickerProps]
+  );
+
   return (
     <ComboBoxNormalized
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...pickerProps}
       onInputChange={onInputChange}
+      onOpenChange={onOpenChange}
     />
   );
 }