feat(components): [el-dropdown]add handleOpen and handleClose methods (#5444)

* feat(components): [el-dropdown]add handleOpen and handleClose methods

* feat(components): [el-dropdown]add handleOpen and handleClose methods

* feat(components): [el-dropdown]add handleOpen and handleClose methods

docs/en-US/component/dropdown.md

@@ -95,6 +95,16 @@ dropdown/command-event
 
 :::
 
+## Dropdown methods
+
+You can open or close the dropdown menu by manually use `handleOpen` or `handleClose`
+
+:::demo
+
+dropdown/dropdown-methods
+
+:::
+
 ## Sizes
 
 Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.
@@ -138,6 +148,13 @@ dropdown/sizes
 | command        | triggers when a dropdown item is clicked                          | the command dispatched from the dropdown item |
 | visible-change | triggers when the dropdown appears/disappears                     | true when it appears, and false otherwise     |
 
+## Dropdown Methods
+
+| Method      | Description             | Parameters |
+| ----------- | ----------------------- | ---------- |
+| handleOpen  | open the dropdown menu  | —          |
+| handleClose | close the dropdown menu | —          |
+
 ## Dropdown-Menu Slots
 
 | Name | Description              | Subtags       |

docs/examples/dropdown/dropdown-methods.vue

@@ -0,0 +1,48 @@
+<template>
+  <div style="font-size: 14px">
+    <p>open(close) the Dropdown list2 will close(open) the Dropdown List1.</p>
+  </div>
+  <div style="margin: 15px">
+    <el-button @click="showClick">show</el-button>
+  </div>
+  <el-dropdown ref="dropdown1" trigger="contextmenu" style="margin-right: 30px">
+    <span class="el-dropdown-link"> Dropdown List1 </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item>Action 1</el-dropdown-item>
+        <el-dropdown-item>Action 2</el-dropdown-item>
+        <el-dropdown-item>Action 3</el-dropdown-item>
+        <el-dropdown-item disabled>Action 4</el-dropdown-item>
+        <el-dropdown-item divided>Action 5</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+
+  <el-dropdown trigger="contextmenu" @visible-change="handleVisible2">
+    <span class="el-dropdown-link"> Dropdown List2 </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item>Action 1</el-dropdown-item>
+        <el-dropdown-item>Action 2</el-dropdown-item>
+        <el-dropdown-item>Action 3</el-dropdown-item>
+        <el-dropdown-item disabled>Action 4</el-dropdown-item>
+        <el-dropdown-item divided>Action 5</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const dropdown1 = ref()
+function handleVisible2(visible: any) {
+  if (visible) {
+    dropdown1.value.handleClose()
+  } else {
+    dropdown1.value.handleOpen()
+  }
+}
+function showClick() {
+  dropdown1.value.handleOpen()
+}
+</script>

packages/components/dropdown/__tests__/dropdown.spec.ts

@@ -187,6 +187,44 @@ describe('Dropdown', () => {
     expect(content.open).toBe(true)
   })
 
+  test('handleOpen and handleClose', async () => {
+    const wrapper = _mount(
+      `
+      <el-dropdown trigger="click" ref="refDropdown" 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 command="a">Apple</el-dropdown-item>
+            <el-dropdown-item command="b">Orange</el-dropdown-item>
+            <el-dropdown-item command="c">Cherry</el-dropdown-item>
+            <el-dropdown-item command="d">Peach</el-dropdown-item>
+            <el-dropdown-item command="e">Pear</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      `,
+      () => ({
+        name: '',
+      })
+    )
+    await nextTick()
+    const dropdown = wrapper.vm
+    const content = wrapper.findComponent(ElTooltip).vm as InstanceType<
+      typeof ElTooltip
+    >
+    expect(content.open).toBe(false)
+    await dropdown.$refs.refDropdown.handleOpen()
+    jest.runAllTimers()
+    await rAF()
+    expect(content.open).toBe(true)
+    await dropdown.$refs.refDropdown.handleClose()
+    jest.runAllTimers()
+    await rAF()
+    expect(content.open).toBe(false)
+  })
+
   test('split button', async () => {
     const handleClick = jest.fn()
     const wrapper = _mount(

packages/components/dropdown/src/dropdown.ts

@@ -9,18 +9,12 @@ import type { Options } from '@popperjs/core'
 
 import type { ButtonType } from '@element-plus/components/button'
 import type { Placement } from '@element-plus/components/popper'
-import type {
-  ComponentInternalInstance,
-  Component,
-  ComputedRef,
-  Ref,
-} from 'vue'
+import type { ComponentInternalInstance, Component, ComputedRef } from 'vue'
 import type { Nullable } from '@element-plus/utils/types'
 
 export interface IElDropdownInstance {
   instance?: ComponentInternalInstance
   dropdownSize?: ComputedRef<string>
-  visible?: Ref<boolean>
   handleClick?: () => void
   commandHandler?: (...arg) => void
   show?: () => void

packages/components/dropdown/src/dropdown.vue

@@ -121,7 +121,6 @@ export default defineComponent({
     const referenceElementRef = ref()
     const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)
     const contentRef = ref<HTMLElement | null>(null)
-    const visible = ref(false)
     const scrollbar = ref(null)
     const currentTabId = ref<string | null>(null)
     const isUsingKeyboard = ref(false)
@@ -134,9 +133,17 @@ export default defineComponent({
     ])
 
     function handleClick() {
+      handleClose()
+    }
+
+    function handleClose() {
       popperRef.value?.onClose()
     }
 
+    function handleOpen() {
+      popperRef.value?.onOpen()
+    }
+
     const dropdownSize = useSize()
 
     function commandHandler(...args: any[]) {
@@ -175,7 +182,6 @@ export default defineComponent({
     provide('elDropdown', {
       instance: _instance,
       dropdownSize,
-      visible,
       handleClick,
       commandHandler,
       trigger: toRef(props, 'trigger'),
@@ -194,7 +200,6 @@ export default defineComponent({
     }
 
     return {
-      visible,
       scrollbar,
       wrapStyle,
       dropdownTriggerKls,
@@ -203,6 +208,8 @@ export default defineComponent({
       handleCurrentTabIdChange,
       handlerMainButtonClick,
       handleEntryFocus,
+      handleClose,
+      handleOpen,
       onMountOnFocus,
       popperRef,
       triggeringElementRef,