fix: onChange calls reduced to 1 when interacting with keyboard

packages/react/src/components/ComboBox/ComboBox-test.js

@@ -33,7 +33,7 @@ const ControlledComboBox = ({ controlledItem }) => {
   const [onChangeCallCount, setOnChangeCallCount] = useState(0);
   const controlledOnChange = ({ selectedItem }) => {
     setValue(selectedItem);
-    setOnChangeCallCount(onChangeCallCount + 1);
+    setOnChangeCallCount((prevCount) => prevCount + 1);
   };
 
   return (

packages/react/src/components/ComboBox/ComboBox.stories.js

@@ -8,7 +8,7 @@
 import React, { useState, useRef } from 'react';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
-
+import { generateItems, generateGenericItem } from '../ListBox/test-helpers';
 import ComboBox from '../ComboBox';
 import Button from '../Button';
 import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
@@ -379,6 +379,34 @@ export const _fullyControlled = (args) => {
   );
 };
 
+export const Test = ({ controlledItem }) => {
+  const items = generateItems(5, generateGenericItem);
+  const [value, setValue] = useState(controlledItem || items[0]);
+  const [onChangeCallCount, setOnChangeCallCount] = useState(0);
+  const controlledOnChange = ({ selectedItem, inputValue }) => {
+    console.log('selected item: ', selectedItem);
+    console.log(inputValue);
+    setValue(selectedItem);
+    setOnChangeCallCount((prevCount) => prevCount + 1);
+  };
+
+  return (
+    <div>
+      <ComboBox
+        id="test-combobox"
+        items={items}
+        selectedItem={value}
+        allowCustomValue
+        onChange={controlledOnChange}
+        placeholder="Filter..."
+        type="default"
+      />
+      <div>value: {value?.label || 'none'}</div>
+      <div>onChangeCallCount: {onChangeCallCount}</div>
+    </div>
+  );
+};
+
 _fullyControlled.argTypes = { ...sharedArgTypes };
 
 AutocompleteWithTypeahead.argTypes = {

packages/react/src/components/ComboBox/ComboBox.tsx

@@ -969,8 +969,13 @@ const ComboBox = forwardRef(
                     // Since `onChange` does not normally fire when the menu is closed, we should
                     // manually fire it when `allowCustomValue` is provided, the menu is closing,
                     // and there is a value.
-                    if (allowCustomValue && isOpen && inputValue) {
-                      onChange({ selectedItem, inputValue });
+                    if (
+                      allowCustomValue &&
+                      isOpen &&
+                      inputValue &&
+                      highlightedIndex === -1
+                    ) {
+                      onChange({ selectedItem: null, inputValue });
                     }
 
                     event.preventDownshiftDefault = true;