How can I disable a Key Down action when a modal is open?

Wappler General How To
#1

I’m making good use of the Key Down action for easy navigation through records. I’m using the arrow-left and arrow-right keys. But, I’ve just noticed that these still work when a modal is open so I was testing an edit form, pressed the right arrow and the record changed!

How can I set the keys to only respond on the main page and stop responding when a modal is open? Where is the best place to put the key down actions as I currently have them on the App component itself.

#2

You could create a variable and add two dynamic events to your modal - on Show and on Hidden - which would set the variable to 1 or 0. You could then use this variable to make the arrow keys navigate conditionally.

I put the key down actions in the same place as you. (Actually, I use Key Up - I’m not sure if it makes any difference).

#3

Where did you attach the keydown event? When on the document/body then it will catch all key events, better is to attach it to the actual DOM element that is using it. Key events are triggered on the active element and bubble up the DOM tree. You can make a DOM element selectable by giving it a tabindex.

#4

Thanks @patrick. I have the keydown events on the app itself (body tag) so I’ll give that a go. You mentioned bubbling up the DOM tree. If I want a keypress event on the main page and not when a modal is showing, where would I attach it?

#5

Here a sample HTML, no framework used, just vanilla JavaScript. Notice that the first 2 divs have a tabindex, they can be focused by clicking on them or tab to them. Only active/focused elements can get key events. The events bubble up, so go from the div to the body, it will not trigger on the other divs. The 3rd div also has a keydown handler, but this div is not focusable and so it can never trigger the event. I hope that it is a bit clear on how key events work in the browser.

<!doctype html>
<html>

    <head>
        <title>Key Event Sample</title>
        <style>
            :focus { border: 1px solid blue;}
            div { padding: 1em; margin: 1em; border: 1px solid black; }
        </style>
        <script>
            function keydown(event) {
                document.getElementById('info').textContent = 'Key ' + event.key + ' pressed on ' + event.target.textContent;
            }
        </script>
    </head>

    <body onkeydown="console.log('this will trigger on always')">
        <div tabindex="0" onkeydown="keydown(event)">
            Component 1
        </div>

        <div tabindex="0" onkeydown="keydown(event)">
            Component 2
        </div>

        <div onkeydown="keydown(event)">
            Component 3
        </div>

        <div id="info">Activate a component and press a key</div>
    </body>

</html>
2 Likes
#6

That’s excellent. Many thanks @patrick. I should now be able to get it working as planned. :slight_smile:

#7

I use a simple Wappler-only method for navigating records in a paged query, eg:
dmx-on:keyup.arrowleft="query.offset > 0 ?qm1.set('offset',(query.offset - query.limit)):''"
… and it works very well. I attach this to the body. (But @patrick’s code could be very useful.)

1 Like