From ddcec72c2a800a13ba4b939dcda1a747046dbdd9 Mon Sep 17 00:00:00 2001
From: Miki <mehranb@amazon.com>
Date: Thu, 7 Oct 2021 10:24:10 -0700
Subject: [PATCH] Fix versions selection being blocked on mobile devices

Signed-off-by: Miki <mehranb@amazon.com>
---
 assets/js/_version-selector.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/assets/js/_version-selector.js b/assets/js/_version-selector.js
index 71e073d2..a5849276 100644
--- a/assets/js/_version-selector.js
+++ b/assets/js/_version-selector.js
@@ -1,3 +1,7 @@
+/* During build, DOC_VERSIONS is prefixed to convey all the versions available, informed by `_data/versions.json`
+ * Example:
+ *    const DOC_VERSIONS = ["1.1","1.0"];
+ */
 const PREFIX = "OpenSearch ";
 const tpl = `
     <style>
@@ -161,6 +165,16 @@ class VersionSelector extends HTMLElement {
         shadowRoot.querySelector('#root').addEventListener('click', e => {
             this._expand(this.getAttribute('aria-expanded') !== 'true');
         });
+
+        /* On some devices, `blur` is fired on the component before navigation occurs when choosing a version from the
+         * dropdown; this ends up hiding the dropdown and preventing the navigation. The `pointerup` on the anchor
+         * element is always fired before the `blur` is dispatched on the component and that is used here to trigger
+         * the navigation before the dropdown is hidden.
+         */
+        shadowRoot.querySelector('#dropdown').addEventListener('pointerup', e => {
+            const {target} = e;
+            if (target.matches('a[href]') && target.href) document.location.href = target.href;
+        });
     }
 
     _expand(flag) {