From 5269b19865edc04e75cb453c832cefd8e0cc2152 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Tue, 3 Dec 2024 17:30:17 -0600 Subject: [PATCH] WIP: ComboBox show all items on open (DH-18088) --- packages/components/package.json | 1 + .../src/spectrum/comboBox/ComboBox.tsx | 2 +- .../src/spectrum/ComboBox.tsx | 32 ++++++++++++++++++- 3 files changed, 33 insertions(+), 2 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index f872a24ae3..ac6d44cb22 100644 --- a/packages/components/package.json +++ b/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", diff --git a/packages/components/src/spectrum/comboBox/ComboBox.tsx b/packages/components/src/spectrum/comboBox/ComboBox.tsx index 3898d65743..f6a365635b 100644 --- a/packages/components/src/spectrum/comboBox/ComboBox.tsx +++ b/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>; - +export { type MenuTriggerAction } from '@react-types/combobox'; export { SpectrumComboBox }; export const ComboBox = React.forwardRef(function ComboBox( diff --git a/packages/jsapi-components/src/spectrum/ComboBox.tsx b/packages/jsapi-components/src/spectrum/ComboBox.tsx index c41a23b608..f139b8b2cb 100644 --- a/packages/jsapi-components/src/spectrum/ComboBox.tsx +++ b/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(props); + const menuTriggerActionRef = useRef(); + 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 ( ); }