Skip to content

fix: prevent product menu staying active after dropdown closes#3071

Open
Sumanth0718 wants to merge 1 commit into
appwrite:mainfrom
Sumanth0718:fix-product-menu-active-state
Open

fix: prevent product menu staying active after dropdown closes#3071
Sumanth0718 wants to merge 1 commit into
appwrite:mainfrom
Sumanth0718:fix-product-menu-active-state

Conversation

@Sumanth0718

Copy link
Copy Markdown

Problem

The Product menu trigger remained in the active (accent/red) state even after the dropdown menu was closed.

Root Cause

The trigger button used focus:text-accent. When the dropdown closed, browser focus returned to the trigger button for accessibility reasons, causing the button to remain styled as active.

Fix

Replaced focus:text-accent with focus-visible:text-accent.

This ensures:

  • Mouse users no longer see the trigger remain active after closing the dropdown
  • Keyboard users still receive visible focus indication for accessibility

Testing

  • Reproduced issue locally
  • Verified fix on development server
  • Ran Svelte diagnostics (0 errors)
  • Verified no lint issues

@greptile-apps

greptile-apps Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR fixes a visual bug where the Products nav trigger button remained styled in the accent color after its dropdown was dismissed — caused by the browser returning focus to the trigger for accessibility reasons, which matched the focus:text-accent Tailwind class.

  • Swaps focus:text-accent for focus-visible:text-accent on the trigger <button> in ProductsSubmenu.svelte so accent styling only applies during keyboard-navigated focus.
  • Mouse users no longer see the stuck accent state; keyboard users retain a visible focus indicator.

Confidence Score: 5/5

A one-line Tailwind class swap with no logic changes; the fix is well-scoped and the rest of the component is untouched.

The change correctly narrows the focus style from any focus event to keyboard-only focus, which is the standard accessibility pattern. No other component behavior is affected, and the mobile submenu counterpart (ProductsMobileSubmenu.svelte) does not have the same class so it is unaffected.

No files require special attention.

Important Files Changed

Filename Overview
src/lib/components/ProductsSubmenu.svelte Replaces focus:text-accent with focus-visible:text-accent on the dropdown trigger button to prevent the accent styling from persisting after the dropdown is closed via mouse interaction.

Reviews (1): Last reviewed commit: "fix: prevent products menu trigger from ..." | Re-trigger Greptile

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.

2 participants