[Bug]: ComboBox not showing the correct highlighted

[AustinGitHub]

Package

@carbon/react, @carbon/styles, carbon-components, carbon-components-react, @carbon/colors

Browser

No response

Package version

"@carbon/charts-react": "1.15.6", "@carbon/colors": "11.21.0", "@carbon/feature-flags": "0.19.0", "@carbon/ibm-products": "2.36.0", "@carbon/icons-react": "10.49.0", "@carbon/layout": "11.21.0", "@carbon/react": "1.56.0", "@carbon/styles": "1.56.0", "@carbon/themes": "11.34.0", "@carbon/type": "11.26.0", "carbon-components": "10.50.0", "carbon-components-react": "7.50.0",

Description

The highlight is not on the selection even though it knows it is selected

Screenshots

Screen.Recording.2024-05-14.at.4.39.51.PM.mov

I am able to replicate this on the storybook. Looks like when there is an alteration to the name when it has a common name type in the dropdown list it breaks the highlight selection

Screen.Recording.2024-05-14.at.4.37.06.PM.mov

Steps to reproduce

Go here https://react.carbondesignsystem.com/?path=/story/components-combobox--with-layer

Then select Option 2.

Remove the 2, then click out of the ComboBox. It will default back to Option 2

When we click back into the ComboBox and it re-opens, the highlight selection is off.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

@preetibansalui could you look into this and determine what we intend the ux of the highlightedIndex should be in this case?

[tay1orjones]

There's a few pieces here worth parsing out. When allowCustomValue="false":

1. When you remove the 2 and the blue highlight ring goes to the first item in the list, this is intended behavior. Option loosely matches the
2. When you then click away from the control and it resets the input value to be what it was previously, that is also intended behavior
3. When you re-open the dropdown, the blue highlight ring should be on the selected item. It's currently placing the blue highlight ring on the first item, which is not correct.

So really it boils down to anytime the dropdown is open (and allowCustomValue="false"), the blue highlight ring should be placed on the currently selected item, if there is one. If there isn't a selected item, it should be on the first item.

I found another example where this isn't working correctly:

CleanShot.2024-05-20.at.08.58.49.mp4