From d8e00451107a964c31ba38ac1e50ef9bded60497 Mon Sep 17 00:00:00 2001
From: Preeti Bansal <146315451+preetibansalui@users.noreply.github.com>
Date: Mon, 16 Sep 2024 13:46:14 +0530
Subject: [PATCH] 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 <tay1orjones@users.noreply.github.com>
---
 .../react/src/components/ComboBox/ComboBox-test.js    |  6 ++++++
 packages/react/src/components/ComboBox/ComboBox.tsx   | 11 +++++++++++
 2 files changed, 17 insertions(+)

diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
index cf71e4ccfc5a..d9da3d7ab0e9 100644
--- 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
index 3903ff5168c0..557c9dbc7ef4 100644
--- 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);