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.enter and Keydown.space do not emit the click event on buttons #2545

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

Comments

@spthiel
Copy link

spthiel commented Nov 14, 2024

Describe the bug
Triggering the keydown event on a button for space or enter will not trigger the click event (which it does in an actual browser)

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

Expected behavior
The click event should be triggered to accurately test keyboard navigation for accessibility

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
@cexbrayat
Copy link
Member

Hi @spthiel

Are you sure your repro is accurate?

<script setup>
const emit = defineEmits(['keydown']);

function onClick(event) {
  emit('click');
}
</script>
<template>
  <button @click="click">Button</button>
</template>

You want to define an emit keydown but emit a click event, and @click calls click instead of onClick?

@spthiel
Copy link
Author

spthiel commented Nov 14, 2024

You want to define an emit keydown but emit a click event, and @click calls click instead of onClick?

You are entirely correct, I am terribly sorry!
I updated the repro to fix the issue and added a test case to test the general functionality works (so that I can assure you it's in the correct state now)

@cexbrayat
Copy link
Member

Thanks for the updated repro.
OOC, have you tried with the attachTo option?

VTU doesn't do anything to support this use-case I think. And I don't know how this is supposed to work if the event is triggered via JS. Maybe for that kind of use case you should rely on another type like component testing or e2e testing.

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