[Vuejs]-Why does focus() without timeout sets the caret at the front of the input?

by

0👍

✅

Found the explanation not long after. The problem was with how I set up the listeners for the key stroke…

        mounted() {
           window.addEventListener('keydown', function (e) {
               if (e.code === 'ArrowUp') {
                   app.moveUp();
               }
           });
        }

The problem was with the fact that I set it to listen for "keydown", instead of "keyup", so whenever the "keydown" was registered, it did, indeed, switch the input. But, when it was released, the input field tries to "jump" to the previous row, but since there’s no previous row, it jumps to the start of the value in said input.

To add, I moved the listeners to the template itself, and introduced preventDefault() function, the limit the default behavior of the input fields.

<input v-on:keydown.up="moveUp($event)" v-on:keydown.down="moveDown($event)">

moveUp(e) {
   e.preventDefault();
   // Do the rest
}

Leave a comment