Harden suggestion combobox: guard empty pick, fix dropdown paint and

scroll

Guard the Enter handler against an absent pick when glossedRanked
empties
while suggestionsOpen is stale-true. Switch SuggestionDropdown
positioning
to useLayoutEffect to avoid a top-left flash, and scroll the active row
into view during keyboard navigation.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: alex-rawlings-yyc

src/__tests__/components/TokenChip.suggestions.test.tsx

@@ -21,6 +21,8 @@ beforeEach(() => {
   jest
     .mocked(useLocalizedStrings)
     .mockReturnValue([{ '%interlinearizer_glossInput_placeholder%': 'gloss' }, false]);
+  // jsdom does not implement scrollIntoView; the dropdown calls it to keep the active row in view.
+  Element.prototype.scrollIntoView = jest.fn();
 });
 
 /**

src/components/SuggestionDropdown.tsx

@@ -5,7 +5,7 @@
  *   the clipping and stacking of the interlinear view's scroll viewports and token-row stacking
  *   contexts.
  */
-import { useEffect, useRef, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import type { GlossedSuggestionEntry } from '../utils/suggestion-engine';
 import { statusTextColorClass } from '../utils/status-colors';
@@ -82,7 +82,9 @@ export default function SuggestionDropdown({
   // it moves, then close only once the anchor has scrolled out of the viewport (a far user scroll
   // that abandons this token). A capture listener catches scrolls of ancestor viewports; scrolls of
   // the panel's own overflow are ignored so a long list can be scrolled without moving or closing it.
-  useEffect(() => {
+  // Layout effect so the first measurement runs before paint — otherwise the portaled panel flashes
+  // at the default top-left before snapping under the anchor.
+  useLayoutEffect(() => {
     const anchor = anchorRef.current;
     /* v8 ignore next -- the chip only mounts this while the input (the anchor) is rendered */
     if (!anchor) return undefined;
@@ -109,6 +111,15 @@ export default function SuggestionDropdown({
     };
   }, [anchorRef, onRequestClose]);
 
+  // Keep the keyboard-highlighted row inside the panel's scroll window. Arrow navigation moves
+  // activeIndex past the visible edge of the max-h-48 overflow without this; scrollIntoView with
+  // block: 'nearest' only scrolls when the row is actually clipped, so it leaves an in-view row put.
+  useLayoutEffect(() => {
+    if (activeIndex < 0) return;
+    const active = listRef.current?.querySelector(`#${CSS.escape(optionId(activeIndex))}`);
+    active?.scrollIntoView({ block: 'nearest' });
+  }, [activeIndex, optionId, entries]);
+
   return createPortal(
     <ul
       ref={setListRef}

src/components/TokenChip.tsx

@@ -275,10 +275,17 @@ export function TokenChip({
         closeSuggestions();
       } else if (e.key === 'Enter') {
         e.preventDefault();
-        // activeIndex -1 (nothing highlighted) falls back to the top row; the list is non-empty
-        // whenever the dropdown is open, so a pick always exists.
+        // activeIndex -1 (nothing highlighted) falls back to the top row. The list is normally
+        // non-empty while open, but glossedRanked can empty out after open (a row approved away),
+        // leaving suggestionsOpen stale while the dropdown is unmounted — guard so Enter closes
+        // rather than dereferencing an absent pick.
+        // activeIndex -1 (nothing highlighted) falls back to the top row. The list is normally
+        // non-empty while open, but glossedRanked can empty out after open (a row approved away)
+        // while suggestionsOpen is still true, so guard rather than dereference an absent pick.
         const pick = glossedRanked[activeIndex] ?? glossedRanked[0];
-        selectSuggestion(pick.id);
+        if (pick) selectSuggestion(pick.id);
+        /* v8 ignore next -- defensive: the empty-pick race above is not reachable from the call sites */ else
+          closeSuggestions();
       }
     } else if (e.key === 'ArrowDown' && hasSuggestions) {
       e.preventDefault();

src/store/analysisSlice.ts

@@ -632,7 +632,9 @@ const analysisSlice = createSlice({
       const lang = state.analysisLanguage;
 
       const resolved = resolveApprovedAnalysis(state, tokenRef);
-      const morpheme = resolved?.analysis.morphemes?.find((m) => m.id === morphemeId);
+      if (!resolved) return;
+      const { analysis } = resolved;
+      const morpheme = analysis.morphemes?.find((m) => m.id === morphemeId);
       if (!morpheme) return;
 
       if (value.trim() === '') {
@@ -646,7 +648,7 @@ const analysisSlice = createSlice({
         // (an edit re-merges, a clear back to the sibling's state leaves a duplicate the suggestion
         // pool would double-count), and unlike writeGloss this clear keeps the morpheme record, so
         // the duplicate payload survives rather than being reclaimed.
-        mergeIntoIdenticalPayload(state, resolved.analysis);
+        mergeIntoIdenticalPayload(state, analysis);
         return;
       }
 
@@ -656,7 +658,7 @@ const analysisSlice = createSlice({
       // in place can make this payload identical to an existing one (e.g. a homograph whose only
       // difference was this morpheme's gloss); re-converge so the dedupe the create path guarantees
       // on first write also holds after morpheme gloss edits (mirrors writeGloss/writeMorphemes).
-      mergeIntoIdenticalPayload(state, resolved.analysis);
+      mergeIntoIdenticalPayload(state, analysis);
     },
     forkAnalysisForToken: {
       /**