Semantic UI Dropdown in React: onChange triggered twice when <a href> is used as content

Question

I'm trying to replace the content of Semantic UI Dropdown items to contain <a href="" /> links, where their default behavior (redirect to link) would be disabled. Simply put, the <a href="" /> should appear in the DOM, but its default behavior should be prevented.

I came across a problem where if I put the <a href="..." />as a content of a dropdown item and then try to select some option (other then the first one), the onChange event is trigerred twice, where the first occurrence is the expected one and the second one always refers to the first item in the dropdown. In the end the first selection of the dropdown always selects the first dropdown item.

Code example can be found here: https://codesandbox.io/s/semantic-ui-example-s6vz1?fontsize=14&hidenavigation=1&module=%2Fexample.js&theme=dark

The error happens when you try to select 2nd, 3rd, ... option in the dropdown - notice the console window displays the onChange entry event twice.

EDIT:

Forgot to mention 2 important things:

• it only occurs when the dropdown is loaded and there's nothing selected
• the user has to click on the text (i.e. on the hyperlink) itself for it to occur

Answer 1

It looks like the component for some reason raises the selectOnBlur event/handler, which then sets the value to the first item in the dropdown. I've managed to get it working correctly once I set selectOnBlur field to false.

Fixed example: https://codesandbox.io/s/semantic-ui-example-z4g9j