fix(ComboBox): mark selected option after reopening with custom value (#20983)

* fix(ComboBox): mark selected option after reopening with custom value

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

---------

Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com>
Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

Author: 3 people

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

@@ -377,6 +377,28 @@ describe('ComboBox', () => {
     );
   });
 
+  it('should keep the selected item active after blur when allowCustomValue is set', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <>
+        <ComboBox {...mockProps} allowCustomValue />
+        <button type="button">Move focus</button>
+      </>
+    );
+
+    await openMenu();
+    await user.click(screen.getByRole('option', { name: 'Item 1' }));
+    expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+
+    await user.click(screen.getByRole('button', { name: 'Move focus' }));
+
+    await openMenu();
+    const activeOption = screen.getByRole('option', { name: 'Item 1' });
+    expect(activeOption).toHaveClass(`${prefix}--list-box__menu-item--active`);
+    expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+  });
+
   it('should yield highlighted item as `selectedItem` when pressing Enter with an unmodified input value', async () => {
     render(<ControlledComboBox controlledItem={null} />);
 

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

@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useRef } from 'react';
-import { Locked } from '@carbon/react/icons';
+import React from 'react';
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 import ComboBox from '../ComboBox';
 import Button from '../Button';

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

@@ -585,15 +585,32 @@ const ComboBox = forwardRef(
             // If custom values are allowed, treat whatever the user typed as
             // the value.
             if (allowCustomValue && highlightedIndex === -1) {
-              const { inputValue } = state;
-
-              changes.selectedItem = inputValue;
+              const inputValue = state.inputValue ?? '';
+              const currentSelectedItem =
+                typeof changes.selectedItem === 'undefined'
+                  ? state.selectedItem
+                  : changes.selectedItem;
+              const isMatchingSelection =
+                currentSelectedItem !== null &&
+                typeof currentSelectedItem !== 'undefined' &&
+                itemToString(currentSelectedItem) === inputValue &&
+                items.some((item) => isEqual(item, currentSelectedItem));
+
+              if (isMatchingSelection) {
+                return changes;
+              }
+              const nextSelectedItem =
+                items.find((item) => itemToString(item) === inputValue) ??
+                inputValue;
 
-              if (onChange) {
-                onChange({ selectedItem: inputValue, inputValue });
+              if (!isEqual(currentSelectedItem, nextSelectedItem) && onChange) {
+                onChange({ selectedItem: nextSelectedItem, inputValue });
               }
 
-              return changes;
+              return {
+                ...changes,
+                selectedItem: nextSelectedItem,
+              };
             }
 
             // If a new item was selected, keep its label in the input.