feat(components): [dropdown] add props for teleported API

element-plus · Oct 7, 2022 · fd68335 · fd68335
1 parent c625cc3
commit fd68335
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 2 deletions.
diff --git a/docs/en-US/component/dropdown.md b/docs/en-US/component/dropdown.md
@@ -95,6 +95,7 @@ dropdown/sizes
 | tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown                  | number          | —                                                        | 0                                                                          |
 | popper-class   | custom class name for Dropdown's dropdown                                                                             | string          | —                                                        | —                                                                          |
 | popper-options | [popper.js](https://popper.js.org/docs/v2/) parameters                                                                | Object          | refer to [popper.js](https://popper.js.org/docs/v2/) doc | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
+| teleported     | whether the dropdown popup is teleported to the body                                                                  | boolean         | —                                                        | true                                                                       |
 
 ## Dropdown Slots
 

diff --git a/packages/components/dropdown/__tests__/dropdown.test.ts b/packages/components/dropdown/__tests__/dropdown.test.ts
@@ -1,11 +1,12 @@
 // @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
-import { describe, expect, test, vi } from 'vitest'
+import { afterEach, describe, expect, test, vi } from 'vitest'
 import { rAF } from '@element-plus/test-utils/tick'
 import { EVENT_CODE } from '@element-plus/constants'
 import { ElTooltip } from '@element-plus/components/tooltip'
 import Button from '@element-plus/components/button'
+import { POPPER_CONTAINER_SELECTOR } from '@element-plus/hooks'
 import Dropdown from '../src/dropdown.vue'
 import DropdownItem from '../src/dropdown-item.vue'
 import DropdownMenu from '../src/dropdown-menu.vue'
@@ -28,6 +29,10 @@ const _mount = (template: string, data, otherObj?) =>
   })
 
 describe('Dropdown', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
   test('create', async () => {
     const wrapper = _mount(
       `
@@ -756,4 +761,60 @@ describe('Dropdown', () => {
       expect(menuItem.attributes()['role']).toBe('button')
     })
   })
+
+  describe('teleported API', () => {
+    test('should mount on popper container', async () => {
+      expect(document.body.innerHTML).toBe('')
+      _mount(
+        `
+        <el-dropdown ref="b" placement="right">
+          <span class="el-dropdown-link" ref="a">
+            dropdown<i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item>Apple</el-dropdown-item>
+              <el-dropdown-item>Orange</el-dropdown-item>
+              <el-dropdown-item>Cherry</el-dropdown-item>
+              <el-dropdown-item disabled>Peach</el-dropdown-item>
+              <el-dropdown-item divided>Pear</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>`,
+        () => ({})
+      )
+
+      await nextTick()
+      expect(
+        document.body.querySelector(POPPER_CONTAINER_SELECTOR).innerHTML
+      ).not.toBe('')
+    })
+
+    test('should not mount on the popper container', async () => {
+      expect(document.body.innerHTML).toBe('')
+      _mount(
+        `
+        <el-dropdown ref="b" placement="right" :teleported="false">
+          <span class="el-dropdown-link" ref="a">
+            dropdown<i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item>Apple</el-dropdown-item>
+              <el-dropdown-item>Orange</el-dropdown-item>
+              <el-dropdown-item>Cherry</el-dropdown-item>
+              <el-dropdown-item disabled>Peach</el-dropdown-item>
+              <el-dropdown-item divided>Pear</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>`,
+        () => ({})
+      )
+
+      await nextTick()
+      expect(
+        document.body.querySelector(POPPER_CONTAINER_SELECTOR).innerHTML
+      ).toBe('')
+    })
+  })
 })
diff --git a/packages/components/dropdown/src/dropdown.ts b/packages/components/dropdown/src/dropdown.ts
@@ -87,6 +87,7 @@ export const dropdownProps = buildProps({
   buttonProps: {
     type: definePropType<ButtonProps>(Object),
   },
+  teleported: useTooltipContentProps.teleported,
 } as const)
 
 export const dropdownItemProps = buildProps({

diff --git a/packages/components/dropdown/src/dropdown.vue b/packages/components/dropdown/src/dropdown.vue
@@ -21,7 +21,7 @@
       :virtual-triggering="splitButton"
       :disabled="disabled"
       :transition="`${ns.namespace.value}-zoom-in-top`"
-      teleported
+      :teleported="teleported"
       pure
       persistent
       @before-show="handleBeforeShowTooltip"