From 4ace651c6ff21d5f969e05e81cd32bbd616012b4 Mon Sep 17 00:00:00 2001
From: ZhenYi <434836402@qq.com>
Date: Sat, 18 Apr 2026 11:16:04 +0800
Subject: [PATCH] fix(frontend): pass selected item to doInsert on Enter key
 and fix list keys
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- handleSelectRef.current() was called without argument → suggestion was
  undefined → suggestion.type threw. Now passes the selected item.
- key prop moved to outer map wrapper div so React can diff the list
  correctly. Inner SuggestionItem/CategoryHeader no longer need keys.
---
 src/components/room/MentionPopover.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/room/MentionPopover.tsx b/src/components/room/MentionPopover.tsx
index 9922d8c..896ca96 100644
--- a/src/components/room/MentionPopover.tsx
+++ b/src/components/room/MentionPopover.tsx
@@ -401,7 +401,7 @@ export function MentionPopover({
         if (!item) return;
         e.preventDefault();
         if (item.type === 'category') onCategoryEnterRef.current(item.category!);
-        else handleSelectRef.current();
+        else handleSelectRef.current(item);
       } else if (e.key === 'Escape') {
         e.preventDefault();
         closePopoverRef.current();
@@ -473,13 +473,17 @@ export function MentionPopover({
         <ScrollArea className="max-h-80">
           <div className="py-1">
             {suggestions.map((s, i) => s.type === 'category' ? (
-              <CategoryHeader key={s.label + i} suggestion={s} isSelected={i === selectedIndex} />
+              <div key={s.label}>
+                <CategoryHeader suggestion={s} isSelected={i === selectedIndex} />
+              </div>
             ) : (
-              <div ref={el => { itemsRef.current[i] = el; }}>
-                <SuggestionItem key={s.mentionId || s.label + i} suggestion={s} isSelected={i === selectedIndex}
+              <div key={s.mentionId || s.label} ref={el => { itemsRef.current[i] = el; }}>
+                <SuggestionItem
+                  suggestion={s} isSelected={i === selectedIndex}
                   onSelect={() => doInsert(s)}
                   onMouseEnter={() => { setSelectedIndex(i); selectedIndexRef.current = i; }}
-                  searchTerm={mentionState.item} />
+                  searchTerm={mentionState.item}
+                />
               </div>
             ))}
           </div>