Bug: In group chat input, using keyboard (ArrowDown/ArrowUp + Enter) to
select an agent from the @mention dropdown always inserts the wrong agent
name (the first one), regardless of which item is visually highlighted.
Mouse click works correctly.
Root cause: naive-ui's NDropdown has its own internal keyboard state machine
that is independent from the component's activeIndex ref. When Enter is
pressed, NDropdown fires @select using its own stale index before
handleKeydown runs, always selecting the wrong agent. NDropdown exposes no
public API to synchronize its internal state, making this unfixable in place.
Fix: Replace NDropdown with a custom <div class="mention-dropdown">
rendered via v-for, with fully manual keyboard/click/hover control. This
eliminates the dual-state conflict entirely — there's a single activeIndex
for all interactions.
Additional improvements over the previous NDropdown-based implementation:
- Scroll follows the active item automatically (scrollToActive)
- Dropdown flips upward when insufficient space below (smart placement)
- Click-outside-to-close via document-level listener
- Transition animation matching NDropdown's fade-in-scale-up exactly
(0.2s cubic-bezier, scale 0.9->1 with opacity fade)
Co-authored-by: Fix Contributor <fix-contributor@hermes-web-ui.dev>
memeflyfly