fix(components): [dropdown] fix A11y when tooltip show (#8655)

element-plus · Jul 7, 2022 · 7f3000a · 7f3000a
1 parent 468c3a3
commit 7f3000a
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/packages/components/dropdown/src/dropdown.vue b/packages/components/dropdown/src/dropdown.vue
@@ -24,8 +24,9 @@
       teleported
       pure
       persistent
-      @before-show="handleShowTooltip"
-      @before-hide="handleHideTooltip"
+      @before-show="handleBeforeShowTooltip"
+      @show="handleShowTooltip"
+      @before-hide="handleBeforeHideTooltip"
     >
       <template #content>
         <el-scrollbar
@@ -191,13 +192,17 @@ export default defineComponent({
       }
     }
 
+    function handleBeforeShowTooltip() {
+      emit('visible-change', true)
+    }
+
     function handleShowTooltip(event?: Event) {
       if (event?.type === 'keydown') {
         contentRef.value.focus()
       }
-      emit('visible-change', true)
     }
-    function handleHideTooltip() {
+
+    function handleBeforeHideTooltip() {
       emit('visible-change', false)
     }
 
@@ -245,8 +250,9 @@ export default defineComponent({
       handleEntryFocus,
       handleClose,
       handleOpen,
+      handleBeforeShowTooltip,
       handleShowTooltip,
-      handleHideTooltip,
+      handleBeforeHideTooltip,
       onFocusAfterTrapped,
       popperRef,
       contentRef,