click-events-have-key-events: v-on:keyup.enter already triggers v-on:click event.

Describe the bug When using a @click event, I’m prompted to add a @keyup.enter or other keyboard event. However, this frequently leads to “doubleclicks”, i.e.:

<button @click="doSomething" @keyup.enter="doSomething">

In this example, pressing Enter triggers both @keyup.enter and @click.

To Reproduce Steps to reproduce the behavior:

1. Create element with both @click and @keyup.enter
2. Create function, logging when function is fired by the above.
3. Use Enter key on element.
4. Open Developer Tools -> Console.
5. See function has fired twice: A keyboard event and a mouse event, if you examine the event.

Expected behavior Following eslint rules shouldn’t cause strange, actual sideeffects.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 80.0.3987.132

Additional context In my case, I detect the generated click event and return out of function with:

if(!event.sourceCapabilities) {return}

…or relevant variants where appropriate.

[AustinGil]

After some chats with folks on Twiiter, apparently the updated version of this eslint plugin is https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility

[TheJaredWilcurt]

A work around I have found is:

  <button
    @click="doThing"
    @keydown.prevent.enter=""
    @keyup.prevent.enter="doThing"
    @keyup.prevent.space="doThing"
  >
    Text
  </button>

Example: https://jsfiddle.net/frscqt0p

Explanation:

// Click event bound to method
@click="doThing"
// When you hold down enter, this prevents it from spamming the doThing function
@keydown.prevent.enter=""
// This binds the enter key to doThing, but prevents it from triggering the click event
@keyup.prevent.enter="doThing"
// This binds the space key to doThing, but prevents it from triggering the click event
@keyup.prevent.space="doThing"