This week in Open Source, I will be tackling this issue.
The cursor position within the QuickOpenInput jumps around when the user is trying to select from the listed options with UP and DOWN arrow keys. Not so convenient if you wish to add more characters to the input.
To start, I want to see what function is being called whenever the UP or DOWN arrow key is pressed. To do this, I set a breakpoint within the HTML page to pause on subtree modification.
I wasn’t able to find a specific function that alters the state of the cursor position. Within the DOM, the input field has two property I wish to observe; selectionStart and selectionEnd. I googled around and found out that the issue of cursor jumping to the beginning and end of an input is actually an intended behavior.
So I tested this out to confirm:
So how do I prevent the default behavior of an event?
Event.preventDefault()Below is a definition of what this function should do according to W3Schools:
Voila~
