Make MenuItem key in ComboBox to use unique id first

[fred104]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having. Is this a feature request (new
component, new icon), a bug, or a general issue?

Is this issue related to a specific component?
Yes, ComboBox

What did you expect to happen? What happened instead? What would you like to
see changed?
There are exceptions from React since there are some duplicated key errors. Tracing back to ComboBox. We are using itemToString to be MenuItem key and the function is also using in menu option. So, if there are options with same text, the error occurs. It's better to use unique id to be MenuItem key.

What browser are you working in?
Chrome

What version of the Carbon Design System are you using?
7.4.0

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
IBM Resilient. We are currently reset the input field after selection.

Steps to reproduce the issue

Giving two items with save text but with different id can reproduce it.

https://codesandbox.io/s/wizardly-pond-q3uh0?fontsize=14&hidenavigation=1&theme=dark

Additional information

Add labels

Please choose the appropriate label(s) from our existing label list to ensure
that your issue is properly categorized. This will help us to better understand
and address your issue.

[asudoh]

Hi 👋 would you want to create a reduced case based on https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox? Thanks!

[fred104]

Sure. https://codesandbox.io/s/wizardly-pond-q3uh0?fontsize=14&hidenavigation=1&theme=dark

[asudoh]

Seems that the problem does not reproduce in the Sandbox. Downloading the content to the local machine yielded the same result. Also I couldn't open the dropdown in the Sandbox. Probably more work is needed in the Sandbox...?

[fred104]

@asudoh Did you see the same screen above?

Here is the sample code.

import React from 'react';
import { render } from 'react-dom';
import { ComboBox } from 'carbon-components-react';

const App = () => (
  <div>
    <ComboBox
    ariaLabel="Choose an item"
    disabled={false}
    helperText="Optional helper text here"
    id="carbon-combobox-example"
    invalidText="A valid value is required"
    itemToString={(item) => {return item ? item.text : '' }}
    items={[
      {
        id: 'option-0',
        text: 'Option'
      },
      {
        id: 'option-1',
        text: 'Option'
      },
    ]}
    light={false}
    onChange={function noRefCheck(){}}
    placeholder="Filter..."
    size={undefined}
    titleText="Combobox title"
    type="default"
  />
  </div>
);

render(<App />, document.getElementById('root'));