Skip to content

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

Merged
simonhamp merged 1 commit into
mainfrom
fix-search-menu-overlap
Sep 19, 2026
Merged

simonhamp merged 1 commit into
mainfrom
fix-search-menu-overlap

Conversation

@simonhamp

Copy link
Copy Markdown
Member

The Search button lives inside the site menu. The menu is a popover, and browsers draw popovers above everything else on the page. DocSearch adds its modal to the page body, so opening search from the menu left the menu sitting on top of the search box. This happened on desktop and mobile.

Now the menu closes when search opens:

  • Clicking Search sets showMobileMenu = false in the same click handler, like the theme buttons already do. The menu is gone before the search modal's first frame.
  • Cmd+K and / open search without touching the button, so DocSearch's onOpen callback now fires a docsearch:open window event and the menu listens for it.

Things to watch for:

  • With Cmd+K the menu can still show for a frame or two, because DocSearch calls onOpen after it paints.
  • After closing search that was opened from the menu, focus lands on the page body instead of the Search button, since that button is inside the closed menu. Cmd+K with the menu closed already behaved this way.

I tested it in headless Chrome at 1440x900 and 390x844 on the home page and a scrolled docs page, clicking Search and pressing Cmd+K with the menu open. Scroll behaviour is unchanged. NavigationMobileMenuSearchTest covers both halves of the wiring and fails without the fix.

🤖 Generated with Claude Code

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>
@coderabbitai

coderabbitai Bot commented Sep 19, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 56c87fc7-f0c5-4071-ae18-b92780eb6fb3

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Comment @coderabbitai help to get the list of available commands.

@simonhamp
simonhamp marked this pull request as ready for review September 19, 2026 13:23
@simonhamp
simonhamp merged commit 1026259 into main Sep 19, 2026
4 checks passed
@simonhamp
simonhamp deleted the fix-search-menu-overlap branch September 19, 2026 14:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant