Adding dynamic options to dropdown highlights values other than pre-selected one.

[nitz2323]

Dynamically adding options to dropdown causes other options to be highlighted rather than highlighting only pre-selected value.

Detailed description

Describe in detail the issue you're having.
If one value of dropdown is preselected, and we change the options dynamically on some button click, then on opening the dropdown list, the pre-selected values shows as selected, but along with that one of the other option also gets highlighted.

Is this a feature request (new component, new icon), a bug, or a general issue?
This is a bug

Is this issue related to a specific component?
The issue is for Dropdown component when options are changed dynamically.

What did you expect to happen? What happened instead? What would you like to see changed?
Expected behaviour should be - Options other than the selected one shouldn’t be highlighted.
Behavious seen is - Pre-selected value is shown as selected and some other options gets highlighted too.

What browser are you working in?
Firefox

Steps to reproduce the issue -

1. Have dropdown with 2 options with one of them as pre-selected.
2. Add more options to dropdown when some button is clicked. (Don't append directly to the available options. The position of previous options must be changed)
3. Open dropdown list. Notice the preselected value is selected and other option also gets highlighted.

Here is the sandbox code. To reproduce -

1. Open dropdown. Preselected value is ABC.
2. Click on button - Add options and then open dropdown.
3. Notice ABC is shown as selected and other option 345 also gets highlighted with blue border. (See in the screenshot attached below)