Fixed dropdown menus behavior on linux.

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>

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;