fix(web): Fix duplicate highlight in composer slash command menu

[AbdulelahHajjar]

What Changed

Four CSS-level changes in ComposerCommandMenu.tsx to make the isActive state the authoritative source of truth for item highlighting:

• Set autoHighlight={false} on the Command component
• Added data-highlighted:bg-transparent data-highlighted:text-inherit to suppress Base UI's built-in highlight styling
• Used bg-accent! / text-accent-foreground! so isActive always wins over data-highlighted when both are present
• Added onMouseMove with an !isActive guard so that moving the mouse after keyboard navigation re-syncs the highlight to the hovered item

Why

When navigating the slash command menu (/, /model, etc..) with arrow keys, two items appear highlighted at the same time.

This happens because Base UI's Autocomplete internally sets a data-highlighted attribute on items, while the custom keyboard navigation (which exists because Lexical intercepts key events before Base UI sees them) manages its own isActive highlight. The two systems can point at different items, producing a double selection.

Mouse interaction is unaffected because onItemHighlighted already syncs hover events into isActive.

UI Changes

Before

Before.mp4

After

After.mp4

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Low Risk
Low risk UI-only change that adjusts how command items are highlighted; main risk is minor regressions in keyboard/mouse highlight behavior.

Overview
Fixes double-highlight in the chat composer slash-command menu by making the app-controlled activeItemId the single source of truth for item styling.

Disables Base UI auto-highlighting (autoHighlight={false}), suppresses data-highlighted styles, forces isActive classes to win, and adds onMouseMove syncing so hover re-aligns the active item after keyboard navigation.

^{Written by Cursor Bugbot for commit 489a230. This will update automatically on new commits. Configure here.}

Note

Fix duplicate highlight in composer slash command menu

• Disables the Command component's built-in auto-highlighting (autoHighlight=false) in ComposerCommandMenu to remove the duplicate highlight.
• Adds an onHighlight prop to ComposerCommandMenuItem that fires on mousemove when the item is not already active, delegating highlight control to the parent via onHighlightedItemChange.
• Suppresses default data-highlighted styles on menu items in favor of the component's own active state styling.

^{Macroscope summarized 489a230.}

[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

Run ID: 0289e7f4-c573-435e-b7f2-5bd94576b2ef

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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 and usage tips.}