From 4001b3c334c712e2506882078c48fb1e19446537 Mon Sep 17 00:00:00 2001
From: Miki <mehranb@amazon.com>
Date: Fri, 3 Dec 2021 16:15:28 -0800
Subject: [PATCH] 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>
---
 assets/js/_version-selector.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/assets/js/_version-selector.js b/assets/js/_version-selector.js
index a5849276..cee94959 100644
--- a/assets/js/_version-selector.js
+++ b/assets/js/_version-selector.js
@@ -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);