fix: cannot clear initial combobox value in fully controlled component (

#17324) * fix: initial state issue * fix: added test case * fix: test case * fix: test case * fix: ci checks fail * fix: merge conflict issue --------- Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Sep 16, 2024 · d8e0045 · d8e0045
1 parent 06844e9
commit d8e0045
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -90,6 +90,12 @@ describe('ComboBox', () => {
     });
   });
 
+  it('should call `onChange` on a fully controlled component', async () => {
+    render(<ComboBox {...mockProps} selectedItem={mockProps.items[0]} />);
+    await userEvent.click(screen.getAllByRole('button')[0]);
+    expect(mockProps.onChange).toHaveBeenCalled();
+  });
+
   it('should select the correct item from the filtered list after text input on click', async () => {
     const user = userEvent.setup();
 

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -57,6 +57,7 @@ const {
   InputKeyDownArrowUp,
   InputKeyDownArrowDown,
   MenuMouseLeave,
+  FunctionSelectItem,
 } = useCombobox.stateChangeTypes;
 
 const defaultItemToString = <ItemType,>(item: ItemType | null) => {
@@ -521,6 +522,16 @@ const ComboBox = forwardRef(
             }
             return changes;
           }
+
+          case FunctionSelectItem:
+            if (onChange) {
+              onChange({
+                selectedItem: changes.selectedItem,
+                inputValue: changes.inputValue,
+              });
+            }
+            return changes;
+
           case InputKeyDownEnter:
             if (allowCustomValue) {
               setInputValue(inputValue);