Dropdown disappears when click away

epicyon-profile.css

@@ -562,10 +562,6 @@ input[type=submit]:hover {
     padding: 5% 0px;
 }
 
-.dropbtn {
-    opacity: 1.0;
-}
-
 /* The container <div> - needed to position the dropdown content */
 .dropdown {
     margin: 10px auto;

webinterface.py

@@ -991,6 +991,18 @@ def clickToDropDownScript() -> str:
     script= \
         'function dropdown() {' \
         '  document.getElementById("myDropdown").classList.toggle("show");' \
+        '}' \
+        'window.onclick = function(event) {' \
+        "  if (!event.target.matches('.dropdown')) {" \
+        '    var dropdowns = document.getElementsByClassName("dropdown-content");' \
+        '    var i;' \
+        '    for (i = 0; i < dropdowns.length; i++) {' \
+        '      var openDropdown = dropdowns[i];' \
+        "      if (openDropdown.classList.contains('show')) {" \
+        "        openDropdown.classList.remove('show');" \
+        '      }' \
+        '    }' \
+        '  }' \
         '}'
     return script