fix(nav): close the site menu when search opens (#526)

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>

Author: simonhamp

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

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>

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;
+    }
+}