fix: fire ComboBox onChange on Tab selection (#22007)

adamalston · web-flow · commit a507191e845f · 2026-04-30T10:15:21.000Z
diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -202,6 +202,30 @@ describe('ComboBox', () => {
     });
   });
 
+  it('should call `onChange` when a highlighted item is committed on Tab', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <>
+        <ComboBox {...mockProps} />
+        <button type="button">Next focus target</button>
+      </>
+    );
+
+    await user.click(findInputNode());
+    await user.type(findInputNode(), 'Item');
+    await user.keyboard('[ArrowDown]');
+    await user.keyboard('[Tab]');
+
+    expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+    expect(mockProps.onChange).toHaveBeenCalledWith({
+      selectedItem: mockProps.items[1],
+    });
+    expect(
+      screen.getByRole('button', { name: 'Next focus target' })
+    ).toHaveFocus();
+  });
+
   describe('onInputChange', () => {
     let onInputChange;
     beforeEach(() => {
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -895,9 +895,10 @@ const ComboBox = forwardRef(
         if (
           (type === ItemClick ||
             type === FunctionSelectItem ||
-            type === InputKeyDownEnter) &&
+            type === InputKeyDownEnter ||
+            (!allowCustomValue && type === InputBlur)) &&
           typeof newSelectedItem !== 'undefined' &&
-          !isEqual(selectedItemProp, newSelectedItem)
+          !isEqual(currentSelectedItem, newSelectedItem)
         ) {
           if (items.some((item) => isEqual(item, newSelectedItem))) {
             committedCustomValueRef.current = '';
