How to make a Dropdown list with the ability to select an element with arrows and a cursor?

Question

Angular

In general, I made it so that when entering text, Dropdown would fall out from below and when hovering over an element, it would be highlighted through: hover, and when the mouse was pressed, it would be transferred to input.
With arrows, I ~ imagine what to do - it's while in the input you need to listen to the arrows.
Well, something with the selection of the current element is not entirely clear what to do. I guess I need to drop :hover and put in the right class myself. Well, how can I determine the element on which the cursor is hovered or selected with arrows, so that I can attach a class to it?

Answer 1

Well, how can I determine the element on which the cursor is hovered or selected with arrows, so that I can attach a class to it?

well, with the mouse - via mouseover, obviously. and with the arrows... well, I would try to set the block change to "keydown", and the selection to "keyup". then when you click you will have a transition to the next block, and when you release the arrow - selection.