iSharkFly-Docs
/
opensearch-docs-cn
mirror of https://github.com/iSharkFly-Docs/opensearch-docs-cn
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix version-selector in Safari 15.x 

Some browser+OS combinations trigger `blur` on the version-selector before a click within the component. To mitigate this, an extra `pointerup` listener was attached but that didn't solve the problem for Safari 15.x. However, `delegatesFocus: true` makes the shadow host focusable and that helps work around this problem.

Fixes: #307
Signed-off-by: Miki <mehranb@amazon.com>
This commit is contained in:
Miki 2021-12-03 16:15:28 -08:00
parent 4e799de88a
commit 4001b3c334
No known key found for this signature in database
GPG Key ID: C49A404B4D7AE54F
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/js/_version-selector.js
View File

@ -39,6 +39,11 @@ const tpl = `
background-image: var(--hover-bg);
}
#root:focus {
outline: none;
}
:host(:not([aria-expanded="true"])) #root:focus,
#root:focus:hover {
box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.25);
}
@ -136,7 +141,7 @@ class VersionSelector extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.attachShadow({mode: 'open', delegatesFocus: true});
this._onBlur = (e => {
this._expand(false);
this.removeEventListener('blur', this._onBlur);