Skip to content

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

Open
Sumanth0718 wants to merge 2 commits into
appwrite:mainfrom
Sumanth0718:fix-product-menu-active-state
Open

fix: prevent product menu staying active after dropdown closes#3071
Sumanth0718 wants to merge 2 commits 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

Replaces focus:text-accent with focus-visible:text-accent on the Products submenu trigger button, so the accent/red active style is only applied during keyboard-driven focus (where a visual indicator is needed) rather than on any programmatic focus event (which is what the browser triggers when the dropdown closes and returns focus to the trigger).

  • The focus-visible pseudo-class is the correct, spec-compliant way to distinguish keyboard focus from mouse/programmatic focus, so the fix is appropriate and does not break accessibility.
  • No other classes or logic in the component are affected.

Confidence Score: 5/5

Safe to merge — the change is a single Tailwind class swap with no logic or structural impact.

The change touches one CSS utility class on one element. focus-visible is the standard replacement for focus in this pattern, browser support is broad, and the change does not touch any component logic, state, or accessibility attributes.

No files require special attention.

Important Files Changed

Filename Overview
src/lib/components/ProductsSubmenu.svelte Single-class change: replaced focus:text-accent with focus-visible:text-accent on the dropdown trigger button to prevent the accent style from persisting after mouse-driven close.

Reviews (2): Last reviewed commit: "Merge branch 'main' into fix-product-men..." | 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