diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
index 53b6f51164ee..cf71e4ccfc5a 100644
--- a/packages/react/src/components/ComboBox/ComboBox-test.js
+++ b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -209,6 +209,13 @@ describe('ComboBox', () => {
expect(findInputNode()).toHaveDisplayValue('Apple');
});
+ it('should handle InputBlur with allowCustomValue', async () => {
+ render();
+ await userEvent.type(findInputNode(), 'Apple');
+ fireEvent.blur(findInputNode());
+ expect(findInputNode()).toHaveDisplayValue('Apple');
+ });
+
it('should apply onChange value if custom value is entered and `allowCustomValue` is set', async () => {
render();
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
index eb26d126bbfe..225a60bf6159 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -492,7 +492,15 @@ const ComboBox = forwardRef(
const { highlightedIndex } = changes;
switch (type) {
- case InputBlur:
+ case InputBlur: {
+ if (allowCustomValue && highlightedIndex == '-1') {
+ const customValue = inputValue as ItemType;
+ changes.selectedItem = customValue;
+ if (onChange) {
+ onChange({ selectedItem: inputValue as ItemType, inputValue });
+ }
+ return changes;
+ }
if (
state.inputValue &&
highlightedIndex == '-1' &&
@@ -502,16 +510,17 @@ const ComboBox = forwardRef(
...changes,
inputValue: itemToString(changes.selectedItem),
};
- } else if (
+ }
+ if (
state.inputValue &&
highlightedIndex == '-1' &&
!allowCustomValue &&
!changes.selectedItem
) {
return { ...changes, inputValue: '' };
- } else {
- return changes;
}
+ return changes;
+ }
case InputKeyDownEnter:
if (allowCustomValue) {
setInputValue(inputValue);