I am using Semantic UI React's Dropdown component and trying to reconcile input from the keyboard and mouse into a single selected line that is used to navigate the options.

The current behavior:

• There are two selections in the dropdown - one for the mouse and one for the keyboard.
• I can use the keyboard to move the keyboard selection up and down.
• If I bring my mouse over an item then the mouse selection moves to that item and the keyboard selection remains where it is.
• If I use the keyboard to move the keyboard selection up and down then 1) the mouse disappears 2) the keyboard selection remains where it is.

The behavior I would like:

• There is only one selection in the dropdown.
• I can use the keyboard to move the selection up and down.
• If I bring my mouse over an item then the selection moves to that item.
• If I use the keyboard to move the selection up and down then 1) the mouse disappears 2) the selection moves up / down.

So, my question:

• How do I make it so there is a single selection in the dropdown, and the mouse and keyboard both control it? I also do not want to trigger a onChange(), as this I'm not fully selecting it with mouse hover / up / down, just changing the focus.

You can use any example from Dropdown's documentation page to test code on: https://react.semantic-ui.com/modules/dropdown/

Here is an example video from https://replit.com/ showing my desired behavior: https://imgur.com/a/C6w77kO