16624 allowcustomvalue not fire onchange event (#16743)

* fix: combobox not showing correct highlight * fix: removed console * fix: allowcustomvalue not fire onchange event --------- Co-authored-by: Nikhil Tomar <[email protected]>
carbon-design-system · Jul 11, 2024 · e8c6ae5 · e8c6ae5
1 parent f7f4baa
commit e8c6ae5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -209,6 +209,20 @@ describe('ComboBox', () => {
     expect(findInputNode()).toHaveDisplayValue('Apple');
   });
 
+  it('should apply onChange value if custom value is entered and `allowCustomValue` is set', async () => {
+    render(<ComboBox {...mockProps} allowCustomValue />);
+
+    expect(findInputNode()).toHaveDisplayValue('');
+
+    await userEvent.type(findInputNode(), 'Apple');
+    await userEvent.keyboard('[Enter]');
+    assertMenuClosed();
+    expect(mockProps.onChange).toHaveBeenCalledWith({
+      inputValue: 'Apple',
+      selectedItem: null,
+    });
+  });
+
   it('should respect slug prop', async () => {
     const { container } = render(<ComboBox {...mockProps} slug={<Slug />} />);
     await waitForPosition();

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -480,7 +480,7 @@ const ComboBox = forwardRef(
               setInputValue(inputValue);
               setHighlightedIndex(changes.selectedItem);
               if (onChange) {
-                onChange({ selectedItem: changes.selectedItem });
+                onChange({ selectedItem: changes.selectedItem, inputValue });
               }
               return changes;
             } else if (changes.selectedItem && !allowCustomValue) {
@@ -725,6 +725,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 });
+                    }
+
                     event.preventDownshiftDefault = true;
                     event?.persist?.();
                   }