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