fix(app): stop left-nav rail tooltips flickering on hover (CS-773)#3502
Merged
Conversation
The far-left product rail (Compliance, Trust, Security, Settings, Admin) showed each icon's tooltip for ~0.1s on hover, then it vanished while the cursor was still over the icon. Root cause: ShellRailNavItem passed a label-derived `id` (`app-shell-rail-<label>`) to the design system's AppShellRailItem. AppShellRail re-renders the same rail items into the always-mounted mobile drawer, so each `id` ends up on two DOM elements. The design system forwards that `id` to the Base UI tooltip trigger, so the two copies register the same deterministic trigger id and collide in Base UI's floating tree. When the desktop tooltip opens, Base UI's closeOnActiveTriggerUnmount logic treats the active trigger as unmounted and closes the tooltip a microtask later — the flash. Fix: don't set an explicit `id` on the rail items. The `id` was unused anywhere in either repo, and without it the design system generates a unique id per instance, so the two copies no longer collide. Extracted ShellRailNavItem into its own file so it can be unit-tested; added a regression test asserting no hard-coded / duplicate rail-item ids. Verified by reproducing the flash with the real design system components in a headless browser (dup id => flash 5/5; no id => stable 5/5) and confirming the Base UI close path via runtime instrumentation.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
cubic analysis
All reported issues were addressed across 3 files
Linked issue analysis
Linked issue: CS-773: [BUG] Left Side Menu Navigation Tooltip Is Glitching during onHover State
| Status | Acceptance criteria | Notes |
|---|---|---|
| ✅ | Tooltips remain visible while the mouse cursor hovers over left-side rail icons (no flicker) | The root cause (duplicate, label-derived id forwarded to the tooltip trigger) was removed: the rail item no longer receives an explicit id, preventing duplicate trigger ids and the Base UI close-path that caused the flash. The PR description documents headless reproduction showing flicker with the old id and stability with the fix. |
| ✅ | Regression tests added to ensure no hard-coded/duplicate rail-item ids and unique ids across desktop rail and mobile drawer | A new test file asserts there is no hard-coded label-derived id and that the mirrored rail items do not produce duplicate ids, preventing the regression. |
Reply with feedback, questions, or to request a fix.
Fix all with cubic | Re-trigger cubic
claudfuen
pushed a commit
that referenced
this pull request
Jul 24, 2026
## [3.108.1](v3.108.0...v3.108.1) (2026-07-24) ### Bug Fixes * **app:** stop left-nav rail tooltips flickering on hover (CS-773) ([#3502](#3502)) ([e7ce85c](e7ce85c))
Contributor
|
🎉 This PR is included in version 3.108.1 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem (CS-773)
Hovering the far-left product rail icons (Compliance, Trust, Security, Settings, Admin) showed each tooltip for ~0.1s, then it vanished while the cursor was still over the icon.
Root cause
ShellRailNavItempassed a label-derivedid(app-shell-rail-<label>) to the design system'sAppShellRailItem.AppShellRailre-renders the same rail items into the always-mounted mobile drawer (viasetRailContent), so eachidlands on two DOM elements. The design system forwards thatidto the Base UI tooltip trigger, so both copies register the same deterministic trigger id and collide in Base UI's floating tree. When the desktop tooltip opens, Base UI'scloseOnActiveTriggerUnmountlogic treats the active trigger as unmounted and closes the tooltip one microtask later — the flash.Notably, this is not caused by the
<Link>/<a>nesting (a common first guess): a bare tooltip trigger inside an anchor stays open fine. The trigger is the duplicateid.Fix
Don't set an explicit
idon the rail items. Theidwas unused anywhere incomporcomp-private(only referenced at its own definition site). Without it, the design system generates a unique id per instance, so the two copies no longer collide.ShellRailNavIteminto its own file so it can be unit-tested.id, passes with the fix).How it was verified
id→ flash 5/5; noid→ stable 5/5.closeOnActiveTriggerUnmount) via temporary runtime instrumentation (reverted).ShellRailNavItem.test.tsx: 2/2 passing; verified it fails when theidis reintroduced.Follow-up (design system, out of scope here)
AppShellRailItemforwarding a consumeridstraight to the Base UI tooltip trigger — combined withAppShellRailduplicating rail content into the mobile drawer — means any consumer that sets anidhits this bug. Worth hardening upstream (e.g., don't use a consumeridas the trigger id, or don't remount identical triggers in the drawer).Summary by cubic
Fixes tooltip flicker in the left nav rail (CS-773). Removes hard-coded ids from rail items so the desktop rail and mobile drawer no longer collide, keeping tooltips open on hover.
ShellRailNavItem; stopped passingidtoAppShellRailItemfrom@trycompai/design-system.Written for commit f177919. Summary will update on new commits.