ZhenYi/gitdataai
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(frontend): pass selected item to doInsert on Enter key and fix list keys

Browse Source 
- 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.
This commit is contained in:
ZhenYi 2026-04-18 11:16:04 +08:00
parent 989a4117db
commit 4ace651c6f
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/room/MentionPopover.tsx
View File

@ -401,7 +401,7 @@ export function MentionPopover({
if (!item) return; if (!item) return;
e.preventDefault(); e.preventDefault();
if (item.type === 'category') onCategoryEnterRef.current(item.category!); if (item.type === 'category') onCategoryEnterRef.current(item.category!);
else handleSelectRef.current(); else handleSelectRef.current(item);
} else if (e.key === 'Escape') { } else if (e.key === 'Escape') {
e.preventDefault(); e.preventDefault();
closePopoverRef.current(); closePopoverRef.current();
@ -473,13 +473,17 @@ export function MentionPopover({
<ScrollArea className="max-h-80"> <ScrollArea className="max-h-80">
<div className="py-1"> <div className="py-1">
{suggestions.map((s, i) => s.type === 'category' ? ( {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; }}> <div key={s.mentionId || s.label} ref={el => { itemsRef.current[i] = el; }}>
<SuggestionItem key={s.mentionId || s.label + i} suggestion={s} isSelected={i === selectedIndex} <SuggestionItem
suggestion={s} isSelected={i === selectedIndex}
onSelect={() => doInsert(s)} onSelect={() => doInsert(s)}
onMouseEnter={() => { setSelectedIndex(i); selectedIndexRef.current = i; }} onMouseEnter={() => { setSelectedIndex(i); selectedIndexRef.current = i; }}
searchTerm={mentionState.item} /> searchTerm={mentionState.item}
/>
</div> </div>
))} ))}
</div> </div>