authorgravatar for aab.hajjar@gmail.comAbdulelah Hajjar <aab.hajjar@gmail.com> 2026-03-30 04:14:59+03:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-03-29 18:14:59-07:00
log63584449002d93aab65599ec34d2352663d5caf7
tree9070e8df4ab8e3617a56c3f178f55f9e8afb9e72
parent792ad4b5c1ed226be33d1623de8cbaf828f9053d
signature Signed by PGP key B5690EEEBB952194

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

1 files changed, 8 insertions(+), 2 deletions(-)

apps/web/src/components/chat/ComposerCommandMenu.tsx+8-2
...@@ -43,6 +43,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {...@@ -43,6 +43,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
43}) {43}) {
44 return (44 return (
45 <Command45 <Command
46 autoHighlight={false}
46 mode="none"47 mode="none"
47 onItemHighlighted={(highlightedValue) => {48 onItemHighlighted={(highlightedValue) => {
48 props.onHighlightedItemChange(49 props.onHighlightedItemChange(
...@@ -58,6 +59,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {...@@ -58,6 +59,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
58 item={item}59 item={item}
59 resolvedTheme={props.resolvedTheme}60 resolvedTheme={props.resolvedTheme}
60 isActive={props.activeItemId === item.id}61 isActive={props.activeItemId === item.id}
62 onHighlight={props.onHighlightedItemChange}
61 onSelect={props.onSelect}63 onSelect={props.onSelect}
62 />64 />
63 ))}65 ))}
...@@ -80,15 +82,19 @@ const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {...@@ -80,15 +82,19 @@ const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {
80 item: ComposerCommandItem;82 item: ComposerCommandItem;
81 resolvedTheme: "light" | "dark";83 resolvedTheme: "light" | "dark";
82 isActive: boolean;84 isActive: boolean;
85 onHighlight: (itemId: string | null) => void;
83 onSelect: (item: ComposerCommandItem) => void;86 onSelect: (item: ComposerCommandItem) => void;
84}) {87}) {
85 return (88 return (
86 <CommandItem89 <CommandItem
87 value={props.item.id}90 value={props.item.id}
88 className={cn(91 className={cn(
89 "cursor-pointer select-none gap-2",92 "cursor-pointer select-none gap-2 data-highlighted:bg-transparent data-highlighted:text-inherit",
90 props.isActive && "bg-accent text-accent-foreground",93 props.isActive && "bg-accent! text-accent-foreground!",
91 )}94 )}
95 onMouseMove={() => {
96 if (!props.isActive) props.onHighlight(props.item.id);
97 }}
92 onMouseDown={(event) => {98 onMouseDown={(event) => {
93 event.preventDefault();99 event.preventDefault();
94 }}100 }}