From 129a2d72e5803c45ba0fc715ea1c85d4cb83fa4c Mon Sep 17 00:00:00 2001
From: mawi1512 <49612241+mawi1512@users.noreply.github.com>
Date: Wed, 9 Feb 2022 08:07:20 +0100
Subject: [PATCH] fix(components): [el-dropdown] use custom attributes for
 dropdown items (#5779)

* fix(components): [el-dropdown] use custom attributes for dropdown items

* fix: forward props and attrs
---
 .../dropdown/__tests__/dropdown.spec.ts       | 24 +++++++++++++++++++
 .../dropdown/src/dropdown-item-impl.vue       |  8 +++++--
 .../components/dropdown/src/dropdown-item.vue | 11 +++++++--
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/packages/components/dropdown/__tests__/dropdown.spec.ts b/packages/components/dropdown/__tests__/dropdown.spec.ts
index 4d56ff2ee5..0e508355e8 100644
--- a/packages/components/dropdown/__tests__/dropdown.spec.ts
+++ b/packages/components/dropdown/__tests__/dropdown.spec.ts
@@ -487,4 +487,28 @@ describe('Dropdown', () => {
 
     expect(popperElement.classList.contains('custom-popper-class')).toBe(true)
   })
+
+  test('custom attributes for dropdown items', async () => {
+    const wrapper = _mount(
+      `
+      <el-dropdown>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item data-custom-attribute="hello">Item</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      `,
+      () => ({})
+    )
+    await nextTick()
+    expect(
+      wrapper
+        .findComponent({
+          name: 'DropdownItemImpl',
+        })
+        .find('.el-dropdown-menu__item')
+        .element.getAttribute('data-custom-attribute')
+    ).toBe('hello')
+  })
 })
diff --git a/packages/components/dropdown/src/dropdown-item-impl.vue b/packages/components/dropdown/src/dropdown-item-impl.vue
index 90e89b8d25..48505bf9fa 100644
--- a/packages/components/dropdown/src/dropdown-item-impl.vue
+++ b/packages/components/dropdown/src/dropdown-item-impl.vue
@@ -1,8 +1,12 @@
 <template>
-  <div v-if="divided" class="el-dropdown-menu__item--divided"></div>
+  <div
+    v-if="divided"
+    class="el-dropdown-menu__item--divided"
+    v-bind="$attrs"
+  ></div>
   <div
     :ref="itemRef"
-    v-bind="dataset"
+    v-bind="{ ...dataset, ...$attrs }"
     :aria-disabled="disabled"
     :class="{
       'el-dropdown-menu__item': true,
diff --git a/packages/components/dropdown/src/dropdown-item.vue b/packages/components/dropdown/src/dropdown-item.vue
index 1c70fe7d77..6ab4987ea1 100644
--- a/packages/components/dropdown/src/dropdown-item.vue
+++ b/packages/components/dropdown/src/dropdown-item.vue
@@ -5,7 +5,7 @@
   >
     <el-roving-focus-item :focusable="!disabled">
       <el-dropdown-item-impl
-        v-bind="$props"
+        v-bind="propsAndAttrs"
         @pointerleave="handlePointerLeave"
         @pointermove="handlePointerMove"
         @click="handleClick"
@@ -41,9 +41,10 @@ export default defineComponent({
     ElRovingFocusItem,
     ElDropdownItemImpl,
   },
+  inheritAttrs: false,
   props: dropdownItemProps,
   emits: ['pointermove', 'pointerleave', 'click'],
-  setup(props, { emit }) {
+  setup(props, { emit, attrs }) {
     const { elDropdown } = useDropdown()
     const _instance = getCurrentInstance()
     const itemRef = ref<HTMLElement | null>(null)
@@ -97,11 +98,17 @@ export default defineComponent({
       }
     )
 
+    // direct usage of v-bind={ ...$props, ...$attrs } causes type errors
+    const propsAndAttrs = computed(() => {
+      return { ...props, ...attrs }
+    })
+
     return {
       handleClick,
       handlePointerMove,
       handlePointerLeave,
       textContent,
+      propsAndAttrs,
     }
   },
 })