fix(web): stop the sidebar project menu from highlighting the first project on open

[ishaanko]

Opening the sidebar project filter with the mouse highlighted the first project row even though the pointer was not over it. It looked like a stray hover state.

Base UI's MenuPopup focuses the first tabbable element on open. Menu rows are tabIndex=-1 until highlighted, so that element was the project settings gear button in the first project row; focus bubbled into the row and highlighted it. The gear now hands that open-time focus to the menu itself (only when focus arrives from outside the popup) so the row does not light up. The gear stays in the tab order: Tab from a highlighted row still reaches it, arrow keys still move between rows, and the gear still opens settings by mouse and keyboard.

Fixes #7915. Related to #1399 and #5521, which cover the broader keyboard/screen-reader story for these gear buttons.

Before	After

Made with Claude Fable 5 in Claude Code.

---

Note

Low Risk
Small sidebar focus-handling tweak with no auth, data, or API changes. Keyboard tab order and gear click behavior are intended to stay the same.

Overview
Opening the sidebar project filter with the mouse no longer highlights the first project as if it were hovered.

Base UI focuses the first tabbable control on menu open—the settings gear on the first row—which bubbled into the row and lit it up. The gear now redirects that outside-the-popup focus to the menu itself, while Tab from a highlighted row still reaches the gear.

^{Reviewed by Cursor Bugbot for commit e03213a. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix sidebar project menu highlighting first project's settings button on open

Adds an onFocus handler to the project settings Button in Sidebar.tsx. When focus enters the menu from outside (e.g., on menu open), the handler stops propagation and programmatically focuses the menu container with preventScroll=true, so the first row's gear icon does not receive initial focus. Click handling and tab navigation from a highlighted row are unchanged.

^{Macroscope summarized e03213a.}

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[coderabbitai]

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: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c808e6eb-4cb6-4723-9040-ec3bdc88a03e

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

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[macroscopeapp]

One finding: the fix removes the only keyboard path to per-project settings from this menu. See the inline comment.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Skipped

Macroscope did not run approvability analysis for this PR. Macroscope could not determine whether this PR modifies its approvability configuration, so the PR was not approved automatically. A PR that may change the rules that govern approval is never approved automatically.