I'm experimenting with trying to implement a keyboard navigation between few input fields using VueJs.
The template is currently set up like so...
<div v-for="(note, index) in notes"
:key="index" ref="notex" class="input-wrapper" id="input-wrapper"
:class="{ 'focused': note.isFocused }">
<input v-model="note.value"
spellcheck="false" class="input" v-on:keydown.enter="createNextNote()"
:id="note.value ? '' : 'empty-input'"
@focus="note.isFocused = true" @blur="note.isFocused = false">
</div>
The method that's being run when I click the "ArrowUp" (I have set up a global listener for that)
moveUp() {
const index = parseInt(Object.keys(this.notes).find(key => this.notes[key].isFocused));
if (!this.notes[index - 1]) {
return;
}
this.notes[index].isFocused = false;
this.notes[index - 1].isFocused = true;
let requiredInput = this.$refs['notex'][index - 1].firstChild;
// Why does this need the timeout?
setTimeout(() => requiredInput.focus(), 1);
},
Emphasis on the timeout function.
What I do not understand is the difference between using the timeout, and not using the timeout.
When I simply call requiredInput.focus() it puts the focus in the input field, but the caret is at the front of the input field.
When I use timeout and do it like in the example provided above - the caret is behind the already inputted text - just like I want it.
I tried using VueJs's nextTick method, but in that case it's the same as without the timeout - the caret is put before the input value.
Could someone help me understand the difference, please?
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
}