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);