From e50ba23ffc2d814e75a9174e9339e03ea5d9e5fc Mon Sep 17 00:00:00 2001
From: Natalia Tepluhina <NataliaTepluhina@users.noreply.github.com>
Date: Thu, 25 Apr 2019 05:39:19 +0300
Subject: [PATCH] polish: add warning when .native modifier is used on native
 HTML elements (#9884)

---
 src/core/vdom/create-element.js          |  6 ++++++
 test/unit/features/directives/on.spec.js | 14 ++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/src/core/vdom/create-element.js b/src/core/vdom/create-element.js
index 46027084b51..ba36e15b12d 100644
--- a/src/core/vdom/create-element.js
+++ b/src/core/vdom/create-element.js
@@ -98,6 +98,12 @@ export function _createElement (
     ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
     if (config.isReservedTag(tag)) {
       // platform built-in elements
+      if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
+        warn(
+          `The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
+          context
+        )
+      }
       vnode = new VNode(
         config.parsePlatformTagName(tag), data, children,
         undefined, undefined, context
diff --git a/test/unit/features/directives/on.spec.js b/test/unit/features/directives/on.spec.js
index a97ddaa8947..b7801a82f22 100644
--- a/test/unit/features/directives/on.spec.js
+++ b/test/unit/features/directives/on.spec.js
@@ -460,6 +460,20 @@ describe('Directive v-on', () => {
     expect(spy).toHaveBeenCalled()
   })
 
+  it('should throw a warning if native modifier is used on native HTML element', () => {
+    vm = new Vue({
+      el,
+      template: `
+        <button @click.native="foo"></button>
+      `,
+      methods: { foo: spy },
+    })
+
+    triggerEvent(vm.$el, 'click')
+    expect(`The .native modifier for v-on is only valid on components but it was used on <button>.`).toHaveBeenWarned()
+    expect(spy.calls.count()).toBe(0)
+  })
+
   it('.once modifier should work with child components', () => {
     vm = new Vue({
       el,