Semantic-ui-react: Dropdown: setState in onChange leads to mismatch of 'active' and 'selected' option

[jjjkkklll]

Steps

I want to setState() by onChange of the Dropdown

Expected Result

The state should be set and the dropdown should change its value.
The selected option should be active and selected

Actual Result

The state is set as expected
The selected option is set to active, the previously selected option is kept as selected.
=> Selected and active do not match the same option anymore

Version

0.75.1

Testcase

https://codesandbox.io/s/lrvqlpy7oz

[layershifter]

You should use the Dropdown as controlled component, codesandbox.

[jjjkkklll]

Thanks, but it seems like that does not help! Could you check my sandbox one more time, maybe I am doing something wrong?
https://codesandbox.io/s/nn2wn70r5j

[layershifter]

Thanks, now I understand your problem, my poor display doesn't show issue to me :sob: Looks like problem with indexes, should be checked. Help is much appreciated.

[jjjkkklll]

It looks like the issue is still present in some cases.

E.g. passing an element to the content of an option within name, text or content like so:

let options = [ { text: "1", value: "1", content: <span>a</span> }, ... ];

will lead to mismatch again.

ShowCase: https://codesandbox.io/s/pp0w7wrn7q

[oskarkook]

Here's another one which is bugged: https://codesandbox.io/s/xr4xz2x9n4

In the first dropdown, select "3", then "1" and then open the second dropdown. You will see the mismatch.

[jjjkkklll]

should I open a new issue for this?

[layershifter]

Yes, please open a new issue and fully fill the issue template.

[akosidoctor26]

Do we have a fix for this issue?