fix: restore initial controlled ComboBox selection (#21999)

adamalston · web-flow · commit 83f5f8788f31 · 2026-04-16T13:09:16.000Z
diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -538,6 +538,24 @@ describe('ComboBox', () => {
     expect(findInputNode()).toHaveDisplayValue('Item 1');
   });
 
+  it('should restore controlled selected item label on blur when input does not match any item on initial load', async () => {
+    render(
+      <ComboBox
+        {...mockProps}
+        selectedItem={mockProps.items[1]}
+        allowCustomValue={false}
+      />
+    );
+
+    expect(findInputNode()).toHaveDisplayValue('Item 1');
+
+    await userEvent.clear(findInputNode());
+    await userEvent.type(findInputNode(), 'no-match');
+    await userEvent.keyboard('[Tab]');
+
+    expect(findInputNode()).toHaveDisplayValue('Item 1');
+  });
+
   it('should keep exact match input on blur when it matches an item label', async () => {
     render(<ComboBox {...mockProps} allowCustomValue={false} />);
 
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -656,10 +656,12 @@ const ComboBox = forwardRef(
                 items.some((item) => itemToString(item) === currentInput);
 
               if (!hasExactMatch) {
+                const selectedItem =
+                  typeof selectedItemProp !== 'undefined'
+                    ? selectedItemProp
+                    : state.selectedItem;
                 const restoredInput =
-                  state.selectedItem !== null
-                    ? itemToString(state.selectedItem)
-                    : '';
+                  selectedItem !== null ? itemToString(selectedItem) : '';
 
                 return { ...changes, inputValue: restoredInput };
               }
@@ -724,10 +726,12 @@ const ComboBox = forwardRef(
                 items.some((item) => itemToString(item) === currentInput);
 
               if (!hasExactMatch) {
+                const selectedItem =
+                  typeof selectedItemProp !== 'undefined'
+                    ? selectedItemProp
+                    : state.selectedItem;
                 const restoredInput =
-                  state.selectedItem !== null
-                    ? itemToString(state.selectedItem)
-                    : '';
+                  selectedItem !== null ? itemToString(selectedItem) : '';
 
                 return { ...changes, inputValue: restoredInput };
               }
