From 5c9f03a7156b291f91fd1999e66382d3ee08568d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?=
 <sascha.issbruecker@googlemail.com>
Date: Sat, 7 Oct 2023 10:24:09 +0200
Subject: [PATCH] Fix search options not opening on iOS (#549)

* Fix search options not opening on iOS

* cleanup
---
 bookmarks/frontend/behaviors/dropdown.js    | 36 +++++++++++++++++++++
 bookmarks/frontend/index.js                 |  1 +
 bookmarks/styles/bookmark-page.scss         |  6 ----
 bookmarks/templates/bookmarks/nav_menu.html | 23 ++-----------
 bookmarks/templates/bookmarks/search.html   |  2 +-
 5 files changed, 40 insertions(+), 28 deletions(-)
 create mode 100644 bookmarks/frontend/behaviors/dropdown.js

diff --git a/bookmarks/frontend/behaviors/dropdown.js b/bookmarks/frontend/behaviors/dropdown.js
new file mode 100644
index 0000000..bf142e3
--- /dev/null
+++ b/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);
diff --git a/bookmarks/frontend/index.js b/bookmarks/frontend/index.js
index 0e5777f..c751fab 100644
--- a/bookmarks/frontend/index.js
+++ b/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";
diff --git a/bookmarks/styles/bookmark-page.scss b/bookmarks/styles/bookmark-page.scss
index 8f9721a..3a21d9b 100644
--- a/bookmarks/styles/bookmark-page.scss
+++ b/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;
diff --git a/bookmarks/templates/bookmarks/nav_menu.html b/bookmarks/templates/bookmarks/nav_menu.html
index f3935c6..4510330 100644
--- a/bookmarks/templates/bookmarks/nav_menu.html
+++ b/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>
diff --git a/bookmarks/templates/bookmarks/search.html b/bookmarks/templates/bookmarks/search.html
index 4b91d44..2d5008b 100644
--- a/bookmarks/templates/bookmarks/search.html
+++ b/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">