fix(combobox): preselect mark on initial load (#20977)

* fix(combobox): preselect mark on initial load

* test(selected-item): updated

Author: ariellalgilmore

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

@@ -498,6 +498,29 @@ describe('ComboBox', () => {
       // The displayed value should still be the one from the first render.
       expect(findInputNode()).toHaveDisplayValue(mockProps.items[0].label);
     });
+
+    it('should mark the initially selectedItem on load when rendered', async () => {
+      render(
+        <ComboBox
+          {...mockProps}
+          initialSelectedItem={mockProps.items[0]}
+          selectedItem={mockProps.items[0]}
+        />
+      );
+      await openMenu();
+
+      // Find the first menu item (which should be the initially selected item)
+      const menuItems = screen.getAllByRole('option');
+      const firstMenuItem = menuItems[0];
+
+      // Check if the initially selected item has the active class
+      expect(firstMenuItem).toHaveClass(
+        `${prefix}--list-box__menu-item--active`
+      );
+
+      // Check if the initially selected item contains an SVG (checkmark icon)
+      expect(firstMenuItem.querySelector('svg')).toBeInTheDocument();
+    });
   });
 
   describe('provided `selectedItem`', () => {

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

@@ -356,14 +356,52 @@ AutocompleteWithTypeahead.argTypes = {
   onChange: { action: 'onChange' },
 };
 
-export const Test = () => {
+export const Test = (args) => {
+  const items = [
+    {
+      id: 'option-0',
+      text: 'An example option that is really long to show what should be done to handle long text',
+    },
+    {
+      id: 'option-1',
+      text: 'Option 1',
+    },
+    {
+      id: 'option-2',
+      text: 'Option 2',
+    },
+    {
+      id: 'option-3',
+      text: 'Option 3 - a disabled item',
+      disabled: true,
+    },
+    {
+      id: 'option-4',
+      text: 'Option 4',
+    },
+    {
+      id: 'option-5',
+      text: 'Option 5',
+    },
+  ];
   return (
     <div style={{ width: 300 }}>
       <ComboBox
-        id="compForIssue"
-        decorator={<Locked />}
-        items={['zero', 'one', 'two', 'three']}
-        onChange={() => {}}
+        id="carbon-combobox"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        titleText="ComboBox title"
+        helperText="Combobox helper text"
+        onChange={action('onChange')}
+        initialSelectedItem={{
+          id: 'option-1',
+          text: 'Option 1',
+        }}
+        selectedItem={{
+          id: 'option-1',
+          text: 'Option 1',
+        }}
+        {...args}
       />
     </div>
   );

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

@@ -1188,7 +1188,7 @@ const ComboBox = forwardRef(
                     return (
                       <ListBox.MenuItem
                         key={itemProps.id}
-                        isActive={selectedItem === item}
+                        isActive={isEqual(selectedItem, item)}
                         isHighlighted={highlightedIndex === index}
                         title={title}
                         disabled={disabled}
@@ -1198,7 +1198,7 @@ const ComboBox = forwardRef(
                         ) : (
                           itemToString(item)
                         )}
-                        {selectedItem === item && (
+                        {isEqual(selectedItem, item) && (
                           <Checkmark
                             className={`${prefix}--list-box__menu-item__selected-icon`}
                           />