fix(ComboBox): handle custom value on input blur (#17396)

* refactor(ComboBox): remove else-returns * fix(ComboBox): handle custom value on input blue --------- Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
carbon-design-system · Sep 10, 2024 · 890d9b5 · 890d9b5
1 parent f01d544
commit 890d9b5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git 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(<ComboBox {...mockProps} allowCustomValue />);
+    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(<ComboBox {...mockProps} allowCustomValue />);
 

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