Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Keydown events supply incorrect values for event.code #2544

Open
spthiel opened this issue Nov 14, 2024 · 5 comments
Open

Bug: Keydown events supply incorrect values for event.code #2544

spthiel opened this issue Nov 14, 2024 · 5 comments
Labels
bug Something isn't working

Comments

@spthiel
Copy link

spthiel commented Nov 14, 2024

Describe the bug
When using element.trigger('keydown.xyz'), some keys incorrectly pass the keyCode as code to handlers of KeyboardEvents.

This fundamentally breaks testing for keyboard navigation when f.ex. a dropdown has to be tested for keydown.home, keydown.end, space and enter where a handler with check for event.code is the best practice

To Reproduce
https://stackblitz.com/edit/github-bbenms?file=src%2FButton.vue&view=editor

->
Event.code logs a string representation of Event.keyCode for various keys.
Tested keys that do not work correctly: Home, End, Enter, Space, Escape

Expected behavior
Event.code should correctly log the name of the key

Related information:

  System:
    OS: Linux 5.15 Linux Mint 21.3 (Virginia)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 14.30 GB / 31.02 GB
    Container: Yes
    Shell: 0.96.0 - /home/n/.cargo/bin/nu
  npmPackages:
    @vue/test-utils: ^2.4.5 => 2.4.6 
    vitest: ^1.5.0 => 1.6.0 
    vue: ^3.5.12 => 3.5.12 

Additional context

@spthiel spthiel added the bug Something isn't working label Nov 14, 2024
@spthiel spthiel changed the title Bug: Bug: Keydown events supply incorrect values for event.code Nov 14, 2024
@cexbrayat
Copy link
Member

Yes, I think this behavior is there for backward compatibility (see

// get the keyCode for backwards compat
const keyCode =
keyCodesByKeyName[keyModifiers[0]] ||
(options && (options.keyCode || options.code))
const eventProperties = {
...systemModifiersMeta, // shiftKey, metaKey etc
...options, // What the user passed in as the second argument to #trigger
bubbles: meta.bubbles,
cancelable: meta.cancelable,
// Any derived options should go here
keyCode,
code: options.code || keyCode,
// if we have a `key`, use it, otherwise dont set anything (allows user to pass custom key)
...(keyModifiers[0] ? { key: keyModifiers[0] } : {})
}
)

Feel free to open a PR if you think that could be omproved without breaking existing applciations 👍

@spthiel
Copy link
Author

spthiel commented Nov 14, 2024

for backward compatibility

What kind of backwards compatability are we talking here? To my knowledge Event.code has never used to house the keyCode.
This seems to me to just break web standard

@cexbrayat
Copy link
Member

keyCode was a thing but is deprecated https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

But as I said, we're welcoming any contribution to improve this use case

@spthiel
Copy link
Author

spthiel commented Nov 14, 2024

keyCode was a thing but is deprecated

Yes I understand keyCode was deprecated but "code" wasn't and was never used to save a number.
I can contribute here but my idea would be to just remove the "backwards compatibility"

@spthiel
Copy link
Author

spthiel commented Nov 15, 2024

(see)

Actually looking at your code snippet it seems this issue would already be partially solved if a new version was built due to #2434 which would at least allow the 2nd test case in the repro to succeed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants