Autocomplete: scroll the highlighted item into view on arrow nav

#7 in Riparion/riparion-editor — merged 2026-06-02

Problem

The [[/ smart-tag dropdown scrolls (max-height:18rem; overflow-y:auto), but arrow-key navigation only moved the highlight class — it never scrolled the menu. Once the highlight passed the bottom visible edge, the selection walked off-screen and the items below the fold were unreachable. With 8 items and only ~4 visible, ↓ couldn't reach the last four.

Fix

In CompletionPopup (src/autocomplete.rs):

• Each rendered row reports its DOM element via onmounted into a Signal<HashMap<String, Rc<MountedData>>>, keyed by item.label (the same value rows are keyed on). Label-keying — not index — stays correct when the filter narrows, since a surviving row keeps its DOM node and never re-fires onmounted.
• A use_effect(use_reactive!(|(selected, labels)| …)) watches the selected prop and calls el.scroll_to(ScrollBehavior::Instant) to pull the highlighted row into view. use_reactive! because selected is a plain prop (a bare use_effect wouldn't re-run on prop change); Instant because Smooth lags behind held arrow keys.

Testing

Expanded the markdown example's smart-tag catalog from 3 to 13 entries so the menu overflows and the scroll is exercisable.

dx serve --example markdown --features web

Type [[/ in a block, hold ↓ — the list now scrolls and reaches the final entries.

cargo clippy --features web --example markdown and cargo test (20 passing) both clean.

🤖 Generated with Claude Code