fix(use-v-on-exact): Don't flag events with different key codes (#904)

Author: cjpearson

lib/rules/use-v-on-exact.js

@@ -11,6 +11,7 @@
 const utils = require('../utils')
 
 const SYSTEM_MODIFIERS = new Set(['ctrl', 'shift', 'alt', 'meta'])
+const GLOBAL_MODIFIERS = new Set(['stop', 'prevent', 'capture', 'self', 'once', 'passive', 'native'])
 
 // ------------------------------------------------------------------------------
 // Helpers
@@ -36,6 +37,16 @@ function getEventDirectives (attributes, sourceCode) {
     }))
 }
 
+/**
+ * Checks whether given modifier is key modifier
+ *
+ * @param {string} modifier
+ * @returns {boolean}
+ */
+function isKeyModifier (modifier) {
+  return !GLOBAL_MODIFIERS.has(modifier) && !SYSTEM_MODIFIERS.has(modifier)
+}
+
 /**
  * Checks whether given modifier is system one
  *
@@ -86,6 +97,16 @@ function getSystemModifiersString (modifiers) {
   return modifiers.filter(isSystemModifier).sort().join(',')
 }
 
+/**
+ * Creates alphabetically sorted string with key modifiers
+ *
+ * @param {array[string]} modifiers
+ * @returns {string} e.g. "enter,tab"
+ */
+function getKeyModifiersString (modifiers) {
+  return modifiers.filter(isKeyModifier).sort().join(',')
+}
+
 /**
  * Compares two events based on their modifiers
  * to detect possible event leakeage
@@ -100,13 +121,21 @@ function hasConflictedModifiers (baseEvent, event) {
     event.modifiers.includes('exact')
   ) return false
 
-  const eventModifiers = getSystemModifiersString(event.modifiers)
-  const baseEventModifiers = getSystemModifiersString(baseEvent.modifiers)
+  const eventKeyModifiers = getKeyModifiersString(event.modifiers)
+  const baseEventKeyModifiers = getKeyModifiersString(baseEvent.modifiers)
+
+  if (
+    eventKeyModifiers && baseEventKeyModifiers &&
+    eventKeyModifiers !== baseEventKeyModifiers
+  ) return false
+
+  const eventSystemModifiers = getSystemModifiersString(event.modifiers)
+  const baseEventSystemModifiers = getSystemModifiersString(baseEvent.modifiers)
 
   return (
     baseEvent.modifiers.length >= 1 &&
-    baseEventModifiers !== eventModifiers &&
-    baseEventModifiers.indexOf(eventModifiers) > -1
+    baseEventSystemModifiers !== eventSystemModifiers &&
+    baseEventSystemModifiers.indexOf(eventSystemModifiers) > -1
   )
 }
 

tests/lib/rules/use-v-on-exact.js

@@ -158,6 +158,27 @@ ruleTester.run('use-v-on-exact', rule, {
     },
     {
       code: `<template><button @[foo]="foo" @[bar].ctrl="bar"/></template>`
+    },
+    {
+      code: `<template>
+        <input
+          @keydown.enter="foo"
+          @keydown.shift.tab="bar"/>
+      </template>`
+    },
+    {
+      code: `<template>
+        <input
+          @keydown.enter="foo"
+          @keydown.shift.tab.prevent="bar"/>
+      </template>`
+    },
+    {
+      code: `<template>
+        <input-component
+          @keydown.enter.native="foo"
+          @keydown.shift.tab.native="bar"/>
+      </template>`
     }
   ],