github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Popover: fix popover hiding unexpectedly due to accessibility events (#9294)

pull/9310/head
FuryBean 2018-01-16 19:29:04 +08:00 committed by 杨奕
parent 6ce4b313b4
commit 45815504ce
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/popover/src/main.vue
View File

@ -77,9 +77,14 @@ export default {
addClass(reference, 'el-popover__reference'); addClass(reference, 'el-popover__reference');
reference.setAttribute('aria-describedby', this.tooltipId); reference.setAttribute('aria-describedby', this.tooltipId);
reference.setAttribute('tabindex', 0); // tab序列 reference.setAttribute('tabindex', 0); // tab序列
popper.setAttribute('tabindex', 0);
this.trigger !== 'click' && on(reference, 'focus', this.handleFocus); if (this.trigger !== 'click') {
this.trigger !== 'click' && on(reference, 'blur', this.handleBlur); on(reference, 'focusin', this.handleFocus);
on(popper, 'focusin', this.handleFocus);
on(reference, 'focusout', this.handleBlur);
on(popper, 'focusout', this.handleBlur);
}
on(reference, 'keydown', this.handleKeydown); on(reference, 'keydown', this.handleKeydown);
on(reference, 'click', this.handleClick); on(reference, 'click', this.handleClick);
} }
@ -100,8 +105,8 @@ export default {
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
if (children[i].nodeName === 'INPUT' || if (children[i].nodeName === 'INPUT' ||
children[i].nodeName === 'TEXTAREA') { children[i].nodeName === 'TEXTAREA') {
on(children[i], 'focus', this.doShow); on(children[i], 'focusin', this.doShow);
on(children[i], 'blur', this.doClose); on(children[i], 'focusout', this.doClose);
found = true; found = true;
break; break;
} }
@ -110,8 +115,8 @@ export default {
if (found) return; if (found) return;
if (reference.nodeName === 'INPUT' || if (reference.nodeName === 'INPUT' ||
reference.nodeName === 'TEXTAREA') { reference.nodeName === 'TEXTAREA') {
on(reference, 'focus', this.doShow); on(reference, 'focusin', this.doShow);
on(reference, 'blur', this.doClose); on(reference, 'focusout', this.doClose);
} else { } else {
on(reference, 'mousedown', this.doShow); on(reference, 'mousedown', this.doShow);
on(reference, 'mouseup', this.doClose); on(reference, 'mouseup', this.doClose);
@ -184,8 +189,8 @@ export default {
off(reference, 'click', this.doToggle); off(reference, 'click', this.doToggle);
off(reference, 'mouseup', this.doClose); off(reference, 'mouseup', this.doClose);
off(reference, 'mousedown', this.doShow); off(reference, 'mousedown', this.doShow);
off(reference, 'focus', this.doShow); off(reference, 'focusin', this.doShow);
off(reference, 'blur', this.doClose); off(reference, 'focusout', this.doClose);
off(reference, 'mouseleave', this.handleMouseLeave); off(reference, 'mouseleave', this.handleMouseLeave);
off(reference, 'mouseenter', this.handleMouseEnter); off(reference, 'mouseenter', this.handleMouseEnter);
off(document, 'click', this.handleDocumentClick); off(document, 'click', this.handleDocumentClick);

4
packages/theme-chalk/src/popover.scss
View File

@ -32,4 +32,8 @@
outline-width: 0; outline-width: 0;
} }
} }
&:focus:active, &:focus {
outline-width: 0;
}
} }