From 2eebfde8847d9115b92ad7bc0c0e29857fb91c91 Mon Sep 17 00:00:00 2001
From: Simon Hamp <simon.hamp@me.com>
Date: Sat, 19 Sep 2026 14:04:12 +0100
Subject: [PATCH] fix(nav): close the site menu when search opens

The menu is a popover, so the browser draws it above the DocSearch
modal. Opening search from the menu left the menu sitting on top of
the search box on desktop and mobile.

Clicking Search now closes the menu in the same click handler. For
Cmd+K and /, DocSearch's onOpen callback fires a docsearch:open event
that the menu listens for.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 resources/js/app.js                           |  3 +
 .../components/navbar/mobile-menu.blade.php   |  6 +-
 .../NavigationMobileMenuSearchTest.php        | 56 +++++++++++++++++++
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 tests/Feature/NavigationMobileMenuSearchTest.php

diff --git a/resources/js/app.js b/resources/js/app.js
index 57cb6ced0..b94b2ae99 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -189,6 +189,9 @@ const docsearchOptions = {
 docsearch({
     ...docsearchOptions,
     container: '#docsearch-desktop',
+    // The site menu is a popover, so it renders above the search modal. Tell it
+    // to close when a keyboard shortcut opens search while the menu is open.
+    onOpen: () => window.dispatchEvent(new CustomEvent('docsearch:open')),
 })
 
 // Mirror the desktop DocSearch button into the mobile container so that
diff --git a/resources/views/components/navbar/mobile-menu.blade.php b/resources/views/components/navbar/mobile-menu.blade.php
index 5ca02d30b..ff1b9fd25 100644
--- a/resources/views/components/navbar/mobile-menu.blade.php
+++ b/resources/views/components/navbar/mobile-menu.blade.php
@@ -42,6 +42,7 @@
             })
         }
     "
+    x-on:docsearch:open.window="showMobileMenu = false"
     class="relative z-40"
 >
     <button
@@ -419,7 +420,10 @@ class="-mr-0.5 transition-all duration-200 ease-in-out will-change-transform lg:
                     >
                         <div
                             id="docsearch-desktop"
-                            x-on:click="if (window.innerWidth < 640) window.scrollTo({ top: 0, behavior: 'instant' })"
+                            x-on:click="
+                                showMobileMenu = false
+                                if (window.innerWidth < 640) window.scrollTo({ top: 0, behavior: 'instant' })
+                            "
                             aria-label="Search documentation"
                         ></div>
                     </div>
diff --git a/tests/Feature/NavigationMobileMenuSearchTest.php b/tests/Feature/NavigationMobileMenuSearchTest.php
new file mode 100644
index 000000000..8f0b67742
--- /dev/null
+++ b/tests/Feature/NavigationMobileMenuSearchTest.php
@@ -0,0 +1,56 @@
+<?php
+
+namespace Tests\Feature;
+
+use DOMDocument;
+use DOMElement;
+use DOMXPath;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+/**
+ * The menu is a popover, so the browser draws it above everything else,
+ * including the DocSearch modal. It has to close whenever search opens,
+ * otherwise it sits on top of the search box.
+ */
+class NavigationMobileMenuSearchTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_menu_closes_when_its_search_button_is_clicked(): void
+    {
+        $searchButtonContainer = $this->elementOnHomePage('//*[@id="docsearch-desktop"]');
+
+        $this->assertStringContainsString(
+            'showMobileMenu = false',
+            $searchButtonContainer->getAttribute('x-on:click'),
+        );
+    }
+
+    public function test_menu_closes_when_a_keyboard_shortcut_opens_search(): void
+    {
+        $menu = $this->elementOnHomePage('//*[@id="mobile-menu-popover"]/..');
+
+        $this->assertSame('showMobileMenu = false', $menu->getAttribute('x-on:docsearch:open.window'));
+
+        $this->assertMatchesRegularExpression(
+            "/onOpen: .*new CustomEvent\('docsearch:open'\)/",
+            file_get_contents(resource_path('js/app.js')),
+            'DocSearch should announce that it opened with the event the menu listens for.',
+        );
+    }
+
+    private function elementOnHomePage(string $xpath): DOMElement
+    {
+        $dom = new DOMDocument;
+        libxml_use_internal_errors(true);
+        $dom->loadHTML('<?xml encoding="utf-8" ?>'.$this->get('/')->assertOk()->getContent());
+        libxml_clear_errors();
+
+        $element = (new DOMXPath($dom))->query($xpath)->item(0);
+
+        $this->assertInstanceOf(DOMElement::class, $element, "Nothing on the home page matches {$xpath}.");
+
+        return $element;
+    }
+}