Search code examples
javascriptrangeslidervuejs3quasar-framework

Disable Quasar slider arrow key events


When doing a slider input the arrow keys are bound to that slider, even after the mouse event is finished. Using arrowLeft/arrowRight steps the q-slider one value and stops the key event. I'm using the arrow keys for something else in my application (document.addEventListener("onkeydown",(e: Event)=>{//...}) and want to disable this behavior. On normal HTML sliders, I can do <input type="range" onkeydown="event.preventDefault();return true;" /> to disable this, but this does not work on the Quasar sliders.


Solution

  • Solved it by capturing all key events on the document.

        document.addEventListener("keydown", (e: KeyboardEvent) => {
            doButtonPress(e)
        }, true)