💪 Yes! Managed to disable cursor movement during autocomplete selection - for DIY @mention autocomplete component
Wow this @mention autocomplete feature is really NEEDY! So many edge cases to account for!
This time, had to create a function to disable cursor movement when the tooltip list pops up. The event.keyCode is supposedly deprecated but it still works...? So to cover bases, I added event.key as well:
preventCursor(e) {
var visibleList = document.getElementById("usernamesList").style.visibility
if (e.keyCode >= 37 && e.keyCode <= 40 || e.keyCode == 13) {
e.preventDefault();
} else if (e.key === "Arrow-Left" ||
e.key === "Arrow-Right" ||
e.key === "Arrow-Down" ||
e.key === "ArrowUp" ||
e.key === "Enter"
) {
e.preventDefault();
}
},
And then adding an event listener to the showTooltip function:
document.getElementById("text").addEventListener("keydown", this.preventCursor);
And removing event listener when username is selected, by enter or mouse click, in the onEnter() and serResult() functions respectively:
document.getElementById("text").removeEventListener("keydown", this.preventCursor);
Noooow to the very last bit, moving the tooltip to pop up where the cursor's coordinates are. 🤞
This time, had to create a function to disable cursor movement when the tooltip list pops up. The event.keyCode is supposedly deprecated but it still works...? So to cover bases, I added event.key as well:
preventCursor(e) {
var visibleList = document.getElementById("usernamesList").style.visibility
if (e.keyCode >= 37 && e.keyCode <= 40 || e.keyCode == 13) {
e.preventDefault();
} else if (e.key === "Arrow-Left" ||
e.key === "Arrow-Right" ||
e.key === "Arrow-Down" ||
e.key === "ArrowUp" ||
e.key === "Enter"
) {
e.preventDefault();
}
},
And then adding an event listener to the showTooltip function:
document.getElementById("text").addEventListener("keydown", this.preventCursor);
And removing event listener when username is selected, by enter or mouse click, in the onEnter() and serResult() functions respectively:
document.getElementById("text").removeEventListener("keydown", this.preventCursor);
Noooow to the very last bit, moving the tooltip to pop up where the cursor's coordinates are. 🤞