Keyboard shortcut example does not work on OSX

[dfrankow]

Reproduce:

• Visit https://htmx.org/examples/keyboard-shortcuts/
• Type alt-shift-D. Nothing.
• Click on the button, changes to "Did it".

I have no idea how to debug.

I'm using Chrome Version 90.0.4430.85 (Official Build) (x86_64) on OS X 10.14.6.

I tried in incognito mode (since that shuts off most? extensions).

I looked in the Chrome debugger console, and see no errors, no warnings.

I tried command-shift-D, in case that worked, but that bookmarks in chrome, so that key combo is taken.

I tried in Safari Version 14.1 (14611.1.21.161.5). Key combo did not work.

[1cg]

Can you try listening to all events and seeing what the keyboard event has set as properties on the mac:

https://bluerivermountains.com/en/log-all-javascript-events

[dfrankow]

How?

I tried monitor(window, "keydown") in the chrome debugger and typed in the window. Nothing. I tried monitor(document, "keydown"), same thing. I tried monitor(window, "click") and clicked on the button. Nothing. The button changed to "Did it!" though, so I know the click worked. I don't understand how to use the monitor interface.

[goldenbutteredjam]

dfrankow, you can listen for the keyup event with monitorEvents(window, "keyup").

It seems on macOS alt-shift-D (option-shift-D) gives the character "Î", and all the option-shift-key shortcuts are apparently taken, https://slcr.wsu.edu/help-pages/keyboards-osx/

I'm not particularly in love with it, but this character can be added as a trigger.

hx-trigger="click, keyup[key=='Î'] from:body, keyup[altKey&&shiftKey&&key=='D'] from:body"

Adding this trigger does produce the "htmx-internal-data" object:

KeyboardEvent {isTrusted: true, htmx-internal-data: Object, key: "Î", code: "KeyD", location: 0, …}

[dfrankow]

Oh cool, thx. So this particular example on the website just isn't set up for OS X. Got it.

I don't have it set up for testing, but if you think this works, you can close it.

Consider updating the example on https://htmx.org/examples/keyboard-shortcuts/ to use some reasonable keyboard event on OS X as well, so the demo is not confusing.

Thanks!

[nerdoc]

This demo also does not work on Linux (here Manjaro) and Firefox 101. On Chromium (same OS) it works.

[dylan-luttrell]

dfrankow, you can listen for the keyup event with monitorEvents(window, "keyup").

It seems on macOS alt-shift-D (option-shift-D) gives the character "Î", and all the option-shift-key shortcuts are apparently taken, https://slcr.wsu.edu/help-pages/keyboards-osx/

I'm not particularly in love with it, but this character can be added as a trigger.

hx-trigger="click, keyup[key=='Î'] from:body, keyup[altKey&&shiftKey&&key=='D'] from:body"

Adding this trigger does produce the "htmx-internal-data" object:

KeyboardEvent {isTrusted: true, htmx-internal-data: Object, key: "Î", code: "KeyD", location: 0, …}

Unfortunately even this solution is not reliable, as the specific character generated can change with different keyboard languages and layouts.