From e6594ea926eb2f545f61134b2c41e8994dd606e3 Mon Sep 17 00:00:00 2001 From: Summer Date: Fri, 26 Mar 2021 03:01:29 -0500 Subject: [PATCH] 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 --- packages/popover/__tests__/directive.spec.ts | 28 ++++++++++++++++++- packages/popover/__tests__/popover.spec.ts | 29 ++++++++++++++++++++ packages/popover/src/directive.ts | 2 ++ packages/popover/src/index.vue | 3 ++ website/docs/en-US/popover.md | 2 +- website/docs/es/popover.md | 2 +- website/docs/fr-FR/popover.md | 2 +- website/docs/jp/popover.md | 2 +- website/docs/zh-CN/popover.md | 2 +- 9 files changed, 66 insertions(+), 6 deletions(-) diff --git a/packages/popover/__tests__/directive.spec.ts b/packages/popover/__tests__/directive.spec.ts index a341320493..7d64e06b45 100644 --- a/packages/popover/__tests__/directive.spec.ts +++ b/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() + }) }) diff --git a/packages/popover/__tests__/popover.spec.ts b/packages/popover/__tests__/popover.spec.ts index 2a88f05b19..e5fe44e2a3 100644 --- a/packages/popover/__tests__/popover.spec.ts +++ b/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') + }) }) diff --git a/packages/popover/src/directive.ts b/packages/popover/src/directive.ts index db7c85122c..7afabe1d06 100644 --- a/packages/popover/src/directive.ts +++ b/packages/popover/src/directive.ts @@ -4,6 +4,7 @@ import { on } from '@element-plus/utils/dom' interface PopoverInstance { events: Record 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) diff --git a/packages/popover/src/index.vue b/packages/popover/src/index.vue index 757931df00..363b93bb60 100644 --- a/packages/popover/src/index.vue +++ b/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) diff --git a/website/docs/en-US/popover.md b/website/docs/en-US/popover.md index a217cc7224..fd226f182b 100644 --- a/website/docs/en-US/popover.md +++ b/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 | diff --git a/website/docs/es/popover.md b/website/docs/es/popover.md index 12d77f65f7..c73d677717 100644 --- a/website/docs/es/popover.md +++ b/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 | diff --git a/website/docs/fr-FR/popover.md b/website/docs/fr-FR/popover.md index 3f4dbd5e8e..1ba56d9951 100644 --- a/website/docs/fr-FR/popover.md +++ b/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 diff --git a/website/docs/jp/popover.md b/website/docs/jp/popover.md index eb71c52e66..5ba91a4d0e 100644 --- a/website/docs/jp/popover.md +++ b/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 | diff --git a/website/docs/zh-CN/popover.md b/website/docs/zh-CN/popover.md index e1e20cf496..53a7dc5737 100644 --- a/website/docs/zh-CN/popover.md +++ b/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 | 参数 | 说明 |