diff --git a/packages/@react-aria/combobox/docs/useComboBox.mdx b/packages/@react-aria/combobox/docs/useComboBox.mdx index fdf8b1f6b7e..2b788ec7275 100644 --- a/packages/@react-aria/combobox/docs/useComboBox.mdx +++ b/packages/@react-aria/combobox/docs/useComboBox.mdx @@ -448,7 +448,7 @@ function Example() { ### Fully controlled The following example shows how you would create a controlled ComboBox, controlling everything from the selected value (`selectedKey`) -to the combobox options (`items`). By passing in `inputValue`, `selectedKey`, `isOpen`, and `items` to the `ComboBox` you can control +to the combobox options (`items`). By passing in `inputValue`, `selectedKey`, and `items` to the `ComboBox` you can control exactly what your ComboBox should display. For example, note that the item filtering for the controlled ComboBox below now follows a "starts with" filter strategy, accomplished by controlling the exact set of items available to the ComboBox whenever the input value updates. @@ -469,7 +469,6 @@ function ControlledComboBox() { // Store ComboBox input value, selected option, open state, and items // in a state tracker let [fieldState, setFieldState] = React.useState({ - isOpen: false, selectedKey: '', inputValue: '', items: optionList @@ -485,7 +484,6 @@ function ControlledComboBox() { setFieldState(prevState => { let selectedItem = prevState.items.find(option => option.id === key); return ({ - isOpen: false, inputValue: selectedItem?.name ?? '', selectedKey: key, items: optionList.filter(item => startsWith(item.name, selectedItem?.name ?? '')) @@ -497,22 +495,21 @@ function ControlledComboBox() { // field is altered by the user let onInputChange = (value) => { setFieldState(prevState => ({ - isOpen: true, inputValue: value, selectedKey: value === '' ? null : prevState.selectedKey, items: optionList.filter(item => startsWith(item.name, value)) })); }; - // Specify how each of the ComboBox values should change when the - // open state is changed - let onOpenChange = (isOpen) => { - setFieldState(prevState => ({ - isOpen, - inputValue: prevState.inputValue, - selectedKey: prevState.selectedKey, - items: prevState.items - })); + // Show entire list if user opens the menu manually + let onOpenChange = (isOpen, menuTrigger) => { + if (menuTrigger === 'manual' && isOpen) { + setFieldState(prevState => ({ + inputValue: prevState.inputValue, + selectedKey: prevState.selectedKey, + items: optionList + })); + } }; // Pass each controlled prop to useComboBox along with their @@ -523,7 +520,6 @@ function ControlledComboBox() { items={fieldState.items} selectedKey={fieldState.selectedKey} inputValue={fieldState.inputValue} - isOpen={fieldState.isOpen && fieldState.items.length > 0} onOpenChange={onOpenChange} onSelectionChange={onSelectionChange} onInputChange={onInputChange}> diff --git a/packages/@react-spectrum/combobox/docs/ComboBox.mdx b/packages/@react-spectrum/combobox/docs/ComboBox.mdx index 24d4f7b0d67..d0a0cfe20f4 100644 --- a/packages/@react-spectrum/combobox/docs/ComboBox.mdx +++ b/packages/@react-spectrum/combobox/docs/ComboBox.mdx @@ -411,7 +411,7 @@ function Example() { ### Fully controlled ComboBox -When a ComboBox has multiple controlled properties (e.g. `isOpen`, `inputValue`, `selectedKey`), it is important to note that an update to one of these properties will +When a ComboBox has multiple controlled properties (e.g.`inputValue`, `selectedKey`, `items`), it is important to note that an update to one of these properties will not automatically update the others. Each interaction done in the ComboBox will only trigger its associated event handler. For example, typing in the field will only trigger `onInputChange` whereas selecting an item from the ComboBox menu will only trigger `onSelectionChange` so it is your responsibility to update the other controlled properties accordingly. Note that you should provide an `onSelectionChange` handler for a ComboBox with controlled input value and open state. This way, you can properly @@ -436,7 +436,6 @@ function Example() { ]; let [fieldState, setFieldState] = React.useState({ - isOpen: false, selectedKey: '', inputValue: '' }); @@ -447,7 +446,6 @@ function Example() { let onSelectionChange = (key) => { setFieldState({ - isOpen: false, inputValue: list.getItem(key)?.value.name ?? '', selectedKey: key }); @@ -455,20 +453,11 @@ function Example() { let onInputChange = (value) => { setFieldState(prevState => ({ - isOpen: true, inputValue: value, selectedKey: value === '' ? null : prevState.selectedKey })); }; - let onOpenChange = (isOpen) => { - setFieldState(prevState => ({ - isOpen, - inputValue: prevState.inputValue, - selectedKey: prevState.selectedKey - })); - }; - return ( <>
Current selected major id: {fieldState.selectedKey}
@@ -478,8 +467,6 @@ function Example() { defaultItems={list.items} selectedKey={fieldState.selectedKey} inputValue={fieldState.inputValue} - isOpen={fieldState.isOpen} - onOpenChange={onOpenChange} onSelectionChange={onSelectionChange} onInputChange={onInputChange}> {item =>