From 3d46692ee4e8ec67b5bc0f66cdabf4667fa4de88 Mon Sep 17 00:00:00 2001
From: Andrzej Swaton <andrzej.swaton@gmail.com>
Date: Tue, 30 Mar 2021 11:02:46 +0200
Subject: [PATCH] feat(warns): avoid warning native modifiers on dynamic
 components (#11052)

Co-authored-by: Andrzej Swaton <andrzej@diligen.com>
---
 src/core/vdom/create-element.js          |  2 +-
 test/unit/features/directives/on.spec.js | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/core/vdom/create-element.js b/src/core/vdom/create-element.js
index ba36e15b12d..bc81aa2b89c 100644
--- a/src/core/vdom/create-element.js
+++ b/src/core/vdom/create-element.js
@@ -98,7 +98,7 @@ 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)) {
+      if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn) && data.tag !== 'component') {
         warn(
           `The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
           context
diff --git a/test/unit/features/directives/on.spec.js b/test/unit/features/directives/on.spec.js
index 5e755a34f89..95693c199fd 100644
--- a/test/unit/features/directives/on.spec.js
+++ b/test/unit/features/directives/on.spec.js
@@ -474,6 +474,20 @@ describe('Directive v-on', () => {
     expect(spy.calls.count()).toBe(0)
   })
 
+  it('should not throw a warning if native modifier is used on a dynamic component', () => {
+    vm = new Vue({
+      el,
+      template: `
+        <component is="div" @click.native="foo('native')" @click="foo('regular')"/>
+      `,
+      methods: { foo: spy },
+    })
+
+    triggerEvent(vm.$el, 'click')
+    expect(`The .native modifier for v-on is only valid on components but it was used on <div>.`).not.toHaveBeenWarned()
+    expect(spy.calls.allArgs()).toEqual([['regular']]); // Regular @click should work for dynamic components resolved to native HTML elements.
+  })
+
   it('.once modifier should work with child components', () => {
     vm = new Vue({
       el,