Fix search options not opening on iOS (#549)

* Fix search options not opening on iOS

* cleanup

bookmarks/frontend/behaviors/dropdown.js

@@ -0,0 +1,36 @@
+import { registerBehavior } from "./index";
+
+class DropdownBehavior {
+  constructor(element) {
+    this.element = element;
+    this.opened = false;
+    this.onOutsideClick = this.onOutsideClick.bind(this);
+
+    const toggle = element.querySelector(".dropdown-toggle");
+    toggle.addEventListener("click", () => {
+      if (this.opened) {
+        this.close();
+      } else {
+        this.open();
+      }
+    });
+  }
+
+  open() {
+    this.element.classList.add("active");
+    document.addEventListener("click", this.onOutsideClick);
+  }
+
+  close() {
+    this.element.classList.remove("active");
+    document.removeEventListener("click", this.onOutsideClick);
+  }
+
+  onOutsideClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.close();
+    }
+  }
+}
+
+registerBehavior("ld-dropdown", DropdownBehavior);

bookmarks/frontend/index.js

@@ -4,6 +4,7 @@ import { ApiClient } from "./api";
 import "./behaviors/bookmark-page";
 import "./behaviors/bulk-edit";
 import "./behaviors/confirm-button";
+import "./behaviors/dropdown";
 import "./behaviors/modal";
 import "./behaviors/global-shortcuts";
 import "./behaviors/tag-autocomplete";

bookmarks/styles/bookmark-page.scss

@@ -74,12 +74,6 @@
       min-width: 250px;
     }
 
-    &:focus-within {
-      .menu {
-        display: block;
-      }
-    }
-
     .menu .actions {
       margin-top: $unit-4;
       display: flex;

bookmarks/templates/bookmarks/nav_menu.html

@@ -44,8 +44,8 @@
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
     </svg>
   </a>
-  <div class="dropdown dropdown-right">
-    <a href="#" id="mobile-nav-menu-trigger" class="btn btn-link dropdown-toggle" tabindex="0">
+  <div ld-dropdown class="dropdown dropdown-right">
+    <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
            style="width: 24px; height: 24px">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
@@ -80,22 +80,3 @@
   </div>
 </div>
 {% endhtmlmin %}
-<script>
-  // Hide mobile menu on outside click
-  // The Spectre CSS component relies on focus changes to show/hide the dropdown, however mobile browsers like
-  // Safari will not trigger a blur event when clicking on a non-focusable element, so we have to simulate the
-  // behaviour through Javascript
-  const mobileNavMenuTrigger = document.getElementById('mobile-nav-menu-trigger');
-
-  function mobileNavMenuOutsideClickHandler(clickEvent) {
-    if (mobileNavMenuTrigger.parentElement.contains(clickEvent.target)) return
-    mobileNavMenuTrigger.blur();
-  }
-
-  mobileNavMenuTrigger.addEventListener('focus', function () {
-    document.addEventListener('click', mobileNavMenuOutsideClickHandler);
-  })
-  mobileNavMenuTrigger.addEventListener('blur', function () {
-    document.removeEventListener('click', mobileNavMenuOutsideClickHandler);
-  })
-</script>

bookmarks/templates/bookmarks/search.html

@@ -9,7 +9,7 @@
       {{ hidden_field }}
     {% endfor %}
   </form>
-  <div class="search-options dropdown dropdown-right">
+  <div ld-dropdown class="search-options dropdown dropdown-right">
     <button type="button" class="btn dropdown-toggle{% if search.has_modified_preferences %} badge{% endif %}">
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2"
            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">