Conversation menu

views/partials/popover-settings.html

@@ -1,11 +1,11 @@
-<div class="dropdown is-hoverable is-up is-right">
+<div class="dropdown is-up is-right" id="settings-dropdown">
     <div class="dropdown-trigger">
         <button class="button is-small {% if not AnyExists %} is-danger{% endif %}" aria-haspopup="true"
-            aria-controls="dropdown-menu4">
+            aria-controls="dropdown-menu3" onclick="this.parentElement.parentElement.classList.toggle('is-active')">
             <span class="icon"><i class="fa-solid fa-bars"></i></i></span>
         </button>
     </div>
-    <div class="dropdown-menu" id="dropdown-menu4" role="menu">
+    <div class="dropdown-menu" id="dropdown-menu3" role="menu">
         <div class="dropdown-content">
             <div class="dropdown-item">
                 <div class="field">
@@ -120,6 +120,12 @@
 </div>
 
 <script>
+    document.addEventListener('click', function (event) {
+        if (!document.getElementById('settings-dropdown').contains(event.target)) {
+            document.getElementById('settings-dropdown').classList.remove('is-active');
+        }
+    });
+
     document.getElementById('toggle-keys-button').addEventListener('click', function () {
         // Do not take the id="save-field"
         var fields = document.querySelectorAll("#api-keys-form .field.has-addons");