Can't discard a post I'm composing by pressing Escape

[graue]

Describe the bug Pressing Escape used to discard the post I was composing (after confirming). Now it does nothing.

• Which site: phanpy.social
• Which instance: carfree.city

To Reproduce Steps to reproduce the behavior:

1. Start writing a post
2. Press Escape

Expected behavior It asks if I want to discard the post, and if I say yes, does so.

Desktop (please complete the following information):

• OS: Linux
• Browser: Firefox
• Version 121

[cheeaun]

Unable to reproduce this on Firefox 121 and Chrome 120 on macOS. Would need more details.

What actions do you perform when you see the confirmation dialog?

[graue]

I don't see the confirmation dialog because pressing Escape just does nothing.

[graue]

Interesting - I have an OS-wide setting to switch Caps Lock and Escape. So when I press Escape, it's actually the key on the keyboard that's labeled Caps Lock. If I turn that OS-wide setting off, and then press the actual Escape key, then Phanpy starts recognizing it, and does prompt to abandon the post.

I have always had this setting on and Phanpy had no problem with it until recently. Other websites also have no problem with it, including this key event demo.

[graue]

Looks like this was fixed!

[graue]

This bug has returned. What I wrote in January 2024 is again the case:

I have an OS-wide setting to switch Caps Lock and Escape. So when I press Escape, it's actually the key on the keyboard that's labeled Caps Lock. If I turn that OS-wide setting off, and then press the actual Escape key, then Phanpy starts recognizing it, and does prompt to abandon the post.

Some kind of recent change to keyboard shortcuts?

[cheeaun]

@graue there's a recent change but shouldn't affect the esc keys. What do you see when you use the key event demo?

[graue]

The key event demo works correctly. When I press the key on my keyboard which is physically Caps Lock, but which I have mapped to Esc, I correctly see:

You pressed: Escape and the key code is: 27

And likewise when I press the key which is physically Esc, but which I have mapped to Caps Lock, I correctly see:

You pressed: CapsLock and the key code is: 20

However, in Phanpy, the key mapped to Esc does nothing and the key mapped to Caps Lock exits the compose dialog (while also toggling Caps Lock).

[cheeaun]

@graue try this demo instead https://www.toptal.com/developers/keycode — I notice that other linked demo uses the deprecated keyCode instead of code.

I'll need to know the event.key and event.code when pressing your mapped keys.

[graue]

In that demo, event.key correctly matches what the keys are mapped to, while event.code corresponds to the physical key on the keyboard, and is thus incorrect in this application. That matches MDN docs for code:

The KeyboardEvent.code property represents a physical key on the keyboard (as opposed to the character generated by pressing the key). In other words, this property returns a value that isn't altered by keyboard layout or the state of the modifier keys.

...This property is useful when you want to handle keys based on their physical positions on the input device rather than the characters associated with those keys; this is especially common when writing code to handle input for games that simulate a gamepad-like environment using keys on the keyboard.

...To determine what character corresponds with the key event, use the KeyboardEvent.key property instead.

[graue]

Perhaps this was caused by 9bec44b, with react-hotkeys-hook 5's release notes saying:

The hook now only listens to the code of the hotkey, not the produced key.

(I have no idea why they would make that the default! It seems wrong.) You later overrode this by adding useKey: true in many places, but not where src/components/compose.jsx listens for Escape.

[cheeaun]

@graue dev site now has useKey: true in more shortcuts (https://github.com/cheeaun/phanpy/commit/17c2390a5c00dcf7dd1bd996cf8768faa58ff232). Try it out and see if they work for you 🙇‍♂️

[graue]

Surprisingly, no. I would expect that to fix the bug, but it doesn't. As before, only Caps Lock (=physical Esc key) discards the post. I hard-reloaded the dev site to make sure I was getting the latest version too. Strange.

[cheeaun]

@graue 2 things:

1. What do you see on https://www.toptal.com/developers/keycode when pressing CapsLock (physical Esc) and pressing Esc (physcal CapsLock)?
2. Is it the same steps mentioned above?
   1. Start writing a post
   2. Press Escape

[graue]

Answering question 2 first: yes, it's the same steps.

When I press Caps Lock (physical Esc):

JavaScript Key Code 20 event.key: CapsLock event.location: General keys event.code: Escape event.which: 20 event dump: { "key": "CapsLock", "keyCode": 20, "which": 20, "code": "Escape", "location": 0, "altKey": false, "ctrlKey": false, "metaKey": false, "shiftKey": false, "repeat": false }

When I press Esc (physical Caps Lock):

Javascript Key Code 27 event.key: Escape event.location: General keys event.code: CapsLock event.which: 27 event dump: { "key": "Escape", "keyCode": 27, "which": 27, "code": "CapsLock", "location": 0, "altKey": false, "ctrlKey": false, "metaKey": false, "shiftKey": false, "repeat": false }

[cheeaun]

@graue ok this is quite difficult to test on my side. So, I'll need more help from you and try these steps separately and see if they work on your side 🙇‍♂️

Open the user profile card

1. Click on any avatar on the timeline
2. The user profile card (not the page) should open
3. Press 'escape'

Open the media modal

1. Click on any image on any post on the timeline
2. The media modal should open
3. Press 'escape'

Open the search bar

1. Press / (forward slash)
2. The search bar should appear in the middle of the page
3. Press 'escape'

[graue]

Same behavior with all of those, Esc does nothing, Caps Lock exits.

[cheeaun]

@graue could you try the "live demo" on this page and see if anything registers? https://react-hotkeys-hook.vercel.app/docs/documentation/use-record-hotkeys#record-hotkeys (start by pressing 'Record' button and then randomly press any keys)

Caps Lock exits

you mean the Caps Lock (physical Esc) ?

[graue]

could you try the "live demo" on this page and see if anything registers? https://react-hotkeys-hook.vercel.app/docs/documentation/use-record-hotkeys#record-hotkeys (start by pressing 'Record' button and then randomly press any keys)

This live demo also prints the name of the physical key, rather than the assigned function, in the case of "capslock" and "escape". It correctly prints other keys pressed.

Caps Lock exits

you mean the Caps Lock (physical Esc) ?

Correct.

[cheeaun]

@graue try this instead https://stackblitz.com/edit/vitejs-vite-irwvvv1j?embed=1&file=src%2Fapp.jsx&hideExplorer=1&view=preview (same as demo above but with useKeys: true) and see if it works differently 🙇‍♂️

[graue]

Can't use that site:

Incompatible Web Browser

WebContainers currently work in Chromium-based browsers, Firefox, and Safari 16.4.

Oddly, I am using Firefox (138). Maybe they also don't support Linux but didn't think to mention that.

Sorry this is so difficult, and thank you for the continued debugging.

[graue]

Copied the code to a local app and ran it. This correctly uses the key value rather than the physical key. Physical Caps Lock mapped to Escape is Escape and vice versa.