I'm creating a form and am noticing that focus gets stuck in these inputs. I'm using a spatial navigation library (spatial-navigation-js by luke-chang) which enables spatial navigation by arrow keys (and I've mapped gamepad controls to these arrow keys) and it seems arrow key keydown events on the document are being lost when in a textarea or input. This is presumably because arrow keys are used to navigate the (potentially) multi-line text.
To overcome this issue, I've added an "ESC to blur current focused element" flow, but this is not ideal. This forces the user to press "ESC" to jump out of a textbox before being able to continue navigating. Ideally, if the cursor is on the last line of the input and the user presses the down arrow, the focus jumps out of the textbox automatically. Same thing for the first line of the textbox and if the user presses the up arrow.
My initial workaround is to detect what line the cursor is on in the textinput. If on the first or last line and the up or down arrow is pressed respectively, jump out of the text input. But this workaround seems extremely hacky. Is there a better option I should consider?
Thanks!
