From 5ef4024c40a5b7d3bc40effab20bff3ebde1e4fb Mon Sep 17 00:00:00 2001
From: Metalhearf <6446231+Metalhearf@users.noreply.github.com>
Date: Thu, 20 Aug 2026 00:43:37 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Close=20the=20mobile=20dropdown?=
 =?UTF-8?q?=20menu=20when=20clicking=20outside=20it=20(#3059)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dropdown panel only closed through its own X button. Escape already
dismissed it, so the missing pointer equivalent left the panel stuck open
over the page after a stray tap.

Close it on any click landing outside the panel and outside the labels that
toggle it. Both early returns are load-bearing. A label forwards a synthetic
click to its checkbox, so without skipping the input the menu closes in the
same gesture that opened it. And without skipping the opener, opening then
closing with the hamburger leaves the panel open, because this handler and
the label's default action cancel each other out.

The fullscreen panel needs no special case. It covers the viewport, so
every click lands inside it and the handler stays inert.
---
 assets/js/menu-a11y.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/assets/js/menu-a11y.js b/assets/js/menu-a11y.js
index 8aeef7af..56f49a21 100644
--- a/assets/js/menu-a11y.js
+++ b/assets/js/menu-a11y.js
@@ -45,6 +45,19 @@
     });
   }
 
+  function setupMobileMenuOutsideClick() {
+    var toggle = document.getElementById("mobile-menu-toggle");
+    var dialog = document.getElementById("mobile-menu-dialog");
+    if (!toggle || !dialog) return;
+    document.addEventListener("click", function (event) {
+      if (!toggle.checked || event.target === toggle) return;
+      if (dialog.contains(event.target)) return;
+      if (event.target.closest('label[for="mobile-menu-toggle"]')) return;
+      toggle.checked = false;
+      syncCheckboxLabels(toggle);
+    });
+  }
+
   function setupDesktopDropdowns() {
     document.querySelectorAll(".nested-menu").forEach(function (menu) {
       var trigger = menu.querySelector("[aria-haspopup]");
@@ -78,6 +91,7 @@
   function init() {
     setupCheckboxLabels();
     setupMobileMenuEscape();
+    setupMobileMenuOutsideClick();
     setupDesktopDropdowns();
   }