Fix (popover) tabindex prop (#1642)

* fix(popover): fix panel disappear when hover on panel

* popover: fix tabindex prop

* popover: fix popover directive

* add test case for popover

* tabindex prop does not specify a default value & update elpopover component docs

Co-authored-by: Ryan <ryanzhao2128@gmail.com>

packages/popover/__tests__/directive.spec.ts

@@ -1,4 +1,4 @@
-import { nextTick } from 'vue'
+import { h, nextTick, Fragment, withDirectives, ref } from 'vue'
 import Popover from '../src/index.vue'
 import PopoverDirective, { VPopover } from '../src/directive'
 import makeMount from '@element-plus/test-utils/make-mount'
@@ -63,4 +63,30 @@ describe('v-popover', () => {
     expect(document.body.querySelector('.el-popover').getAttribute('style')).not.toContain('display: none')
     wrapper.unmount()
   })
+
+  test('should render correctly with tabindex', async () => {
+    const tabindex = ref(1)
+
+    const Comp = {
+      setup() {
+        return () => {
+          return h(Fragment, null, [
+            h(Popover, { title: 'title', content: AXIOM, ref: 'popover', tabindex: tabindex.value }),
+            withDirectives(h('div', { ref: 'trigger' }, AXIOM), [[PopoverDirective, 'popover']]),
+          ])
+        }
+      },
+    }
+
+    const wrapper = makeMount(Comp, {})()
+    const triggerDom = wrapper.vm.$refs.trigger
+    expect((triggerDom as HTMLElement).getAttribute('tabindex')).toEqual('1')
+
+    tabindex.value = 2
+
+    await nextTick()
+    expect((triggerDom as HTMLElement).getAttribute('tabindex')).toEqual('2')
+
+    wrapper.unmount()
+  })
 })

packages/popover/__tests__/popover.spec.ts

@@ -1,6 +1,7 @@
 import makeMount from '../../test-utils/make-mount'
 import Popover from '../src/index.vue'
 import PopupManager from '@element-plus/utils/popup-manager'
+import { ref, nextTick, h, createSlots } from 'vue'
 
 const AXIOM = 'Rem is the best girl'
 
@@ -79,4 +80,32 @@ describe('Popover.vue', () => {
       ),
     ).toBeLessThanOrEqual(PopupManager.zIndex)
   })
+
+  test('should render correctly with tabindex', async () => {
+    const tabindex = ref(1)
+
+    const Comp = {
+      render() {
+        const slot = () => [ h('button', { ref: 'btn' }, 'click 激活') ]
+
+        return h(Popover, {
+          placement: 'bottom',
+          title: '标题',
+          width: 200,
+          trigger: 'click',
+          tabindex: tabindex.value,
+          content: '这是一段内容,这是一段内容,这是一段内容,这是一段内容。',
+        }, createSlots({}, [{ name: 'reference', fn: slot }]))
+      },
+    }
+
+    const wrapper = makeMount(Comp, {})()
+    const ele = wrapper.vm.$refs.btn
+    expect((ele as HTMLElement).getAttribute('tabindex')).toEqual('1')
+
+    tabindex.value = 2
+
+    await nextTick()
+    expect((ele as HTMLElement).getAttribute('tabindex')).toEqual('2')
+  })
 })

packages/popover/src/directive.ts

@@ -4,6 +4,7 @@ import { on } from '@element-plus/utils/dom'
 interface PopoverInstance {
   events: Record<string, EventListenerOrEventListenerObject>
   triggerRef: HTMLElement
+  tabindex: string
 }
 
 const attachEvents = (el: HTMLElement, binding: DirectiveBinding, vnode: VNode) => {
@@ -11,6 +12,7 @@ const attachEvents = (el: HTMLElement, binding: DirectiveBinding, vnode: VNode)
   const popover = vnode.dirs[0].instance.$refs[_ref] as PopoverInstance
   if (popover) {
     popover.triggerRef = el
+    el.setAttribute('tabindex', popover.tabindex)
     // because v-popover cannot modify the vnode itself due to it has already been
     Object.entries(popover.events).map(([eventName, e]) => {
       on(el, eventName.toLowerCase().slice(2), e)

packages/popover/src/index.vue

@@ -45,6 +45,7 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    tabindex: Number,
   },
   emits,
   setup(props, ctx) {
@@ -78,6 +79,7 @@ export default defineComponent({
       showArrow,
       transition,
       visibility,
+      tabindex,
     } = this
 
     const kls = [
@@ -110,6 +112,7 @@ export default defineComponent({
     const _trigger = trigger ? renderTrigger(trigger, {
       ariaDescribedby: popperId,
       ref: 'triggerRef',
+      tabindex,
       ...events,
     }) : createCommentVNode('v-if', true)
 

website/docs/en-US/popover.md

@@ -172,7 +172,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
 | show-after | delay of appearance, in millisecond | number | — | 0 |
 | hide-after | delay of disappear, in millisecond | number | — | 0 |
 | auto-close | timeout in milliseconds to hide tooltip | number | — | 0 |
-|  tabindex          | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | 0 |
+|  tabindex          | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | — |
 
 ### Slot
 | Name | Description |

website/docs/es/popover.md

@@ -171,7 +171,7 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
 | show-after     | retraso de la apariencia, en milisegundos | number  | —                                        | 0                                        |
 | hide-after     | retraso en el cierre, en milisegundos | number  | —                                        | 0                                        |
 | auto-close     | tiempo a esperar en milisegundos para esconder el Tooltip | number  | —                                        | 0                                        |
-| tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Popover |   number           |      —      |  0    |
+| tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Popover |   number           |      —      |  —    |
 
 ### Slot
 | Nombre    | Descripción                          |

website/docs/fr-FR/popover.md

@@ -173,7 +173,7 @@ Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que
 | show-after | Délai avant l'apparition en millisecondes. | number | — | 0 |
 | hide-after | Le temps de disparaître en millisecondes | number | — | 0 |
 | auto-close | Délai avant disparition. | number | — | 0 |
-| tabindex   | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Popover | number | — | 0 |
+| tabindex   | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Popover | number | — | — |
 
 ### Slot
 

website/docs/jp/popover.md

@@ -172,7 +172,7 @@ popoverの中には、他のコンポーネントを入れ子にすることが
 | show-after | ミリ秒単位の出現の遅延 | number | — | 0 |
 | hide-after | ミリ秒単位の消えるの遅延 | number | — | 0 |
 | auto-close | ツールチップを非表示にするタイムアウト（ミリ秒単位） | number | — | 0 |
-|  tabindex          | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) のpopover | number | — | 0 |
+|  tabindex          | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) のpopover | number | — | — |
 
 ### スロット
 | Name | Description |

website/docs/zh-CN/popover.md

@@ -170,7 +170,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 | show-after | 延迟出现，单位毫秒 | Number | — | 0 |
 | hide-after | 延迟关闭，单位毫秒 | Number | — | 0 |
 | auto-close | Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏 | number | — | 0 |
-| tabindex   | Popover 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
+| tabindex   | Popover 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | — |
 
 ### Slot
 | 参数 | 说明 |