From 0a1dc454be7b277670b7c4fd9cbce89fbcbaf618 Mon Sep 17 00:00:00 2001
From: Revertron <r@revertron.com>
Date: Thu, 6 May 2021 13:29:12 +0200
Subject: [PATCH] Fixed dropdown menus behavior on linux.

---
 src/webview/index.html |  4 ++--
 src/webview/scripts.js | 33 +++++++++++++++++----------------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/webview/index.html b/src/webview/index.html
index 69e2fab..a82f6e7 100644
--- a/src/webview/index.html
+++ b/src/webview/index.html
@@ -166,7 +166,7 @@
                     <div class="control">
                         <div class="dropdown" id="zones-dropdown" onclick="toggle(this, event);" title="Select your TLD - Top Level Domain">
                             <div class="dropdown-trigger">
-                                <button class="button" aria-haspopup="true" aria-controls="zones-menu" onblur="closeZonesDropdown()">
+                                <button class="button" aria-haspopup="true" aria-controls="zones-menu">
                                     <span id="zones-current-name">Select zone</span>
                                     <span class="icon is-small">
                                         <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>
@@ -184,7 +184,7 @@
                 <div class="control">
                     <div class="dropdown" id="advanced-dropdown" onclick="toggle(this, event);">
                         <div class="dropdown-trigger">
-                            <button class="button" aria-haspopup="true" aria-controls="advanced-menu" onblur="closeAdvancedDropdown()">
+                            <button class="button" aria-haspopup="true" aria-controls="advanced-menu">
                                 <span>Advanced</span>
                                 <span class="icon is-small">
                                     <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>
diff --git a/src/webview/scripts.js b/src/webview/scripts.js
index 8860bf9..48e6fad 100644
--- a/src/webview/scripts.js
+++ b/src/webview/scripts.js
@@ -5,6 +5,18 @@ var availableZones = [];
 var myDomains = [];
 var currentZone;
 
+document.addEventListener('click', function (event) {
+    closeDropdowns();
+});
+
+function closeDropdowns() {
+    // Get all elements with class="dropdowns" and hide them
+    var dropdowns = document.getElementsByClassName("dropdown is-active");
+    for (i = 0; i < dropdowns.length; i++) {
+        dropdowns[i].classList.remove('is-active');
+    }
+}
+
 function addRecord(record) {
     recordsBuffer.push(record);
     refreshRecordsList();
@@ -187,6 +199,7 @@ function openTab(element, tabName) {
 
 function toggle(element, event) {
     event.stopPropagation();
+    closeDropdowns();
     element.classList.toggle('is-active');
 }
 
@@ -486,20 +499,6 @@ function keystoreChanged(path, pub_key, hash) {
     var new_domain = document.getElementById("new_domain").disabled = false;
 }
 
-function closeZonesDropdown() {
-    var active = document.activeElement;
-    if (active == null || (active.id != 'zones-menu' && active.tagName != 'BODY')) {
-        document.getElementById("zones-dropdown").className = "dropdown";
-    }
-}
-
-function closeAdvancedDropdown() {
-    var active = document.activeElement;
-    if (active == null || (active.id != 'advanced-menu' && active.tagName != 'BODY')) {
-        document.getElementById("advanced-dropdown").className = "dropdown";
-    }
-}
-
 function refreshZonesList() {
     var buf = "";
     availableZones.sort(function compare(rhs, lhs) {
@@ -522,7 +521,7 @@ function refreshZonesList() {
         if (typeof currentZone !== 'undefined' && currentZone.name == value.name) {
             add_class = "is-active";
         }
-        buf += "<a id=\"zone-{1}\" class=\"dropdown-item {2}\" onclick=\"changeZone('{3}');\">.{4}</a>"
+        buf += "<a id=\"zone-{1}\" class=\"dropdown-item {2}\" onclick=\"changeZone('{3}', event);\">.{4}</a>"
             .replace("{1}", value.name)
             .replace("{2}", add_class)
             .replace("{3}", value.name)
@@ -545,7 +544,9 @@ function zonesChanged(text) {
     refreshZonesList();
 }
 
-function changeZone(zone) {
+function changeZone(zone, event) {
+    event.stopPropagation();
+    closeDropdowns();
     availableZones.forEach(function(value, index, array) {
         if (value.name == zone) {
             currentZone = value;