@estiva-app/ui 0.57.1 → 0.57.3

package/dist/suggestionPopup.d.ts

@@ -1,4 +1,4 @@
-import type { SuggestionOptions } from '@tiptap/suggestion';
+import { type SuggestionOptions } from '@tiptap/suggestion';
 import { type SuggestionMenuRow, type SuggestionMenuSection } from './SuggestionMenu';
 /**
  * Open, or closed less than 100ms ago — what an Enter handler asks. Choosing a

package/dist/suggestionPopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestionPopup.d.ts","sourceRoot":"","sources":["../src/suggestionPopup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAA0B,iBAAiB,EAAmB,MAAM,oBAAoB,CAAA;AACpG,OAAO,EAA6C,KAAK,iBAAiB,EAAE,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAA;AAchI;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAE1C;AAED,mFAAmF;AACnF,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAA;IACb,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAA;IACjB,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7E,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAA;IAC5B,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,iBAAiB,CAAA;IACnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAA;IAChD,mGAAmG;IACnG,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,EAAE,CAAA;CACjC;AA0BD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAmDlH"}
+{"version":3,"file":"suggestionPopup.d.ts","sourceRoot":"","sources":["../src/suggestionPopup.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA+C,KAAK,iBAAiB,EAAwB,MAAM,oBAAoB,CAAA;AAC9H,OAAO,EAA6C,KAAK,iBAAiB,EAAE,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAA;AAqBhI;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAE1C;AAED,mFAAmF;AACnF,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAA;IACb,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAA;IACjB,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7E,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAA;IAC5B,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,iBAAiB,CAAA;IACnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAA;IAChD,mGAAmG;IACnG,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,EAAE,CAAA;CACjC;AA0BD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAsFlH"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.57.1",
+  "version": "0.57.3",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.57.1",
+    "packageVersion": "0.57.3",
     "exports": 130,
     "typeExports": 134,
     "files": null

package/src/ComposerTriggers.mdx

@@ -77,6 +77,14 @@ const urgent = editor ? urgentPubkeys(editor) : undefined
   functions, so they read the app's current data. `@` shows the first six
   names holding the query; `[` the last six whose label or `search` (default:
   `snippet`) holds it.
+- **A query can be more than one word.** A space does not close a list, so a
+  name or a title is typed whole. The list hides while nothing matches and
+  comes back if the words match again; it stops listening at `]` (for `[`),
+  at another `@` (for `@` and `!@`), at a new line, at Escape for the rest of
+  that query, at a pick, or when the caret leaves. A space straight after the
+  key is prose ("meet @ 5pm", "- [ ] task") and opens nothing. A long query reaches
+  `sections(query)` on every keystroke: an app that asks a server for it
+  pauses first, as `referenceSearch` does.
 - **`[` in sections, filled in as answers land:** pass `sections(query)` in
   place of `items` — labelled groups the app has already narrowed and ordered;
   an empty group is not drawn — and `subscribe(listener)`, which the app calls
@@ -90,7 +98,12 @@ const urgent = editor ? urgentPubkeys(editor) : undefined
 - **A row that opens another list** runs `typeTrigger('@')`: it types the key
   once the `/query` is gone.
 - An open list is reported by `isSuggestionActive()`, so an editor that sends
-  on Enter does not send on the Enter that picked a row.
+  on Enter does not send on the Enter that picked a row. A list counts only
+  while it shows rows: with none, Enter sends and Escape is the app's.
+- **Leaving the box ends the list.** Click or Tab into another box and the
+  list closes as it does on Escape, so that box's Escape is its own; coming
+  back finds no list, and Enter sends. A press inside the list (its scrollbar)
+  keeps the caret in the text, and switching to another window keeps the list.
 
 <Canvas of={ComposerTriggersStories.CodeAsABlock} />
 
@@ -110,6 +123,8 @@ says, the tags it earns and sending stay the app's.
 | `!@` | Opens the urgent list |
 | `[` | Opens the reference list |
 | `/` after a space or at the line's start | Opens Format and the app's sections |
+| Space | Part of the query: the list stays open |
+| `]` after `[` | Ends the query; what was typed stays text |
 | ↑ ↓ | Move the highlight, wrapping at the ends |
-| Enter | Inserts the highlighted row, or runs it |
-| Escape | Closes the list |
+| Enter | Inserts the highlighted row, or runs it; with no row, a new line |
+| Escape | Closes the list until the caret leaves that query |

package/src/ComposerTriggers.test.tsx

@@ -6,7 +6,7 @@
  */
 import { act } from 'react'
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
-import { render, screen, cleanup, within } from '@testing-library/react'
+import { render, screen, cleanup, fireEvent, within } from '@testing-library/react'
 import type { Editor } from '@tiptap/core'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
@@ -26,6 +26,7 @@ import {
   type MentionPerson,
   type SlashSection,
 } from './ComposerTriggers'
+import { isSuggestionActive, isSuggestionOpen } from './suggestionPopup'
 
 const KEY = 'b'.repeat(64)
 const PEOPLE: MentionPerson[] = [
@@ -88,8 +89,13 @@ const nodes = () => {
 }
 
 // jsdom lays nothing out, so it has no `scrollIntoView`; the highlighted row calls it.
+// Nor `getClientRects`, which the editor asks for when it scrolls to the caret, after the call has returned.
 beforeAll(() => {
   Element.prototype.scrollIntoView = vi.fn()
+  Element.prototype.getClientRects = () => [] as unknown as DOMRectList
+  // …and a caret in text is measured through a Range.
+  Range.prototype.getClientRects = () => [] as unknown as DOMRectList
+  Range.prototype.getBoundingClientRect = () => new DOMRect()
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
 })
 
@@ -206,6 +212,211 @@ describe('[', () => {
   })
 })
 
+// f586437a (Miky, 2026-10-06): a space keeps the list listening; `]`, Escape, a pick or a new line ends it.
+describe('more than one word', () => {
+  // The start of a title finds it, and so does a sentence holding it — so only the stop can close the list.
+  function Loose() {
+    const made = useEditor({
+      extensions: [
+        StarterKit,
+        Chip,
+        ReferenceTrigger.configure({
+          sections: (query) => [{ label: 'Things', items: ITEMS.filter((item) => item.snippet.startsWith(query) || query.includes(item.snippet)) }],
+          nodeName: 'messageMention',
+          ariaLabel: 'Things',
+          sectionLabel: 'Things',
+        }),
+      ],
+    })
+    editor = made
+    return <EditorContent editor={made} />
+  }
+
+  it('narrows [ across a space, and the pick replaces every word typed', async () => {
+    render(<Loose />)
+    await type('see [line')
+    expect(options()).toHaveLength(8)
+    await type(' 3')
+    expect(options()).toEqual(['Ada: line 3'])
+    await press('Enter')
+    expect(nodes()).toEqual([{ type: 'messageMention', attrs: { id: ITEMS[3].id, label: 'Ada', snippet: 'line 3', uri: ITEMS[3].uri } }])
+    // Nothing typed after `[` is left behind the chip.
+    expect(editor!.getText()).not.toMatch(/\[|line/)
+  })
+
+  it('hides the list while nothing matches and draws it again when the words do', async () => {
+    render(<Loose />)
+    await type('[line 9')
+    expect(screen.queryByRole('listbox')).toBeNull()
+    await act(async () => {
+      editor!.commands.deleteRange({ from: editor!.state.selection.from - 1, to: editor!.state.selection.from })
+    })
+    await type('3')
+    expect(options()).toEqual(['Ada: line 3'])
+  })
+
+  it('leaves Enter a new line while no row shows', async () => {
+    render(<Loose />)
+    await type('[line 9')
+    expect(screen.queryByRole('listbox')).toBeNull()
+    await press('Enter')
+    // No trigger took the key, so the editor's own Enter split the line.
+    expect(editor!.state.doc.childCount).toBe(2)
+    expect(nodes()).toEqual([])
+  })
+
+  it('stops at ], so a bracket in a sentence stays text', async () => {
+    render(<Loose />)
+    await type('see [line 3 above')
+    expect(options()).toEqual(['Ada: line 3'])
+    await type('] and more')
+    expect(screen.queryByRole('listbox')).toBeNull()
+    await press('Enter')
+    expect(nodes()).toEqual([])
+  })
+
+  it('stays closed after Escape for the rest of that bracket', async () => {
+    render(<Loose />)
+    await type('[line 3')
+    expect(options()).toEqual(['Ada: line 3'])
+    await press('Escape')
+    await type(' still line 3')
+    expect(screen.queryByRole('listbox')).toBeNull()
+  })
+
+  it('stops at a new line', async () => {
+    render(<Loose />)
+    await type('[line 3')
+    expect(options()).toEqual(['Ada: line 3'])
+    // A Shift+Enter line, inserted without the scroll jsdom cannot measure.
+    await act(async () => {
+      editor!.commands.insertContent([{ type: 'hardBreak' }, { type: 'text', text: 'line 3' }])
+    })
+    expect(screen.queryByRole('listbox')).toBeNull()
+  })
+
+  it('counts a list as open only while it shows rows, so an Enter with none still sends', async () => {
+    // The grace after the last test's list closed is module-wide: let it pass.
+    await new Promise((resolve) => setTimeout(resolve, 120))
+    render(<Composer />)
+    await type('meet @ad')
+    expect(isSuggestionOpen()).toBe(true)
+    await type(' at noon')
+    expect(screen.queryByRole('listbox')).toBeNull()
+    // A keystroke that left no rows closed nothing, so no grace either.
+    expect(isSuggestionOpen()).toBe(false)
+    expect(isSuggestionActive()).toBe(false)
+    // Words that match again count again.
+    await act(async () => {
+      editor!.commands.deleteRange({ from: editor!.state.selection.from - 8, to: editor!.state.selection.from })
+    })
+    await type('a lo')
+    expect(isSuggestionOpen()).toBe(true)
+  })
+
+  it('takes a space straight after the key for prose, not a query', async () => {
+    render(<Composer />)
+    // Every two-word name holds a space, so "@ " would list them all.
+    await type('meet @ ')
+    expect(screen.queryByRole('listbox')).toBeNull()
+    await type('lovelace')
+    expect(screen.queryByRole('listbox')).toBeNull()
+    expect(isSuggestionOpen()).toBe(false)
+  })
+
+  it('opens nothing for a task box, "[ ]"', async () => {
+    render(<Loose />)
+    await type('[ ] line')
+    expect(screen.queryByRole('listbox')).toBeNull()
+  })
+
+  it('finds a person by first and last name, and a second @ starts over', async () => {
+    render(<Composer />)
+    // A row's text starts with its avatar's initials.
+    await type('@ada lo')
+    expect(options()).toEqual([expect.stringContaining('Ada Lovelace')])
+    await type('ve @be')
+    expect(options()).toEqual([expect.stringContaining('Bea')])
+    await press('Enter')
+    expect(nodes()).toEqual([{ type: 'mention', attrs: { id: 'bea', label: 'Bea', pubkey: null } }])
+    expect(editor!.getText()).toBe('@ada love @Bea ')
+  })
+})
+
+describe('leaving the box', () => {
+  // A page with a second box, as Ship's issue page: the message box and the description.
+  function Page() {
+    return (
+      <>
+        <Composer />
+        <input aria-label="Other box" />
+      </>
+    )
+  }
+  const other = () => screen.getByRole<HTMLInputElement>('textbox', { name: 'Other box' })
+
+  it('ends the list when focus moves to another box, and coming back finds none', async () => {
+    // The grace after the last test's list closed is module-wide: let it pass.
+    await new Promise((resolve) => setTimeout(resolve, 120))
+    render(<Page />)
+    await type('see [')
+    // The caret is in the text before it leaves (the focus command waits a frame).
+    await act(async () => editor!.view.focus())
+    expect(document.activeElement).toBe(editor!.view.dom)
+    expect(options()).toHaveLength(6)
+    expect(isSuggestionOpen()).toBe(true)
+    await act(async () => other().focus())
+    expect(screen.queryByRole('listbox')).toBeNull()
+    // So the other box's own Escape and Enter are its own — no grace either.
+    expect(isSuggestionOpen()).toBe(false)
+    expect(isSuggestionActive()).toBe(false)
+    // A click back in, as the view takes it (the focus command waits a frame).
+    await act(async () => editor!.view.focus())
+    expect(screen.queryByRole('listbox')).toBeNull()
+    // As after Escape: the rest of that bracket is text.
+    await type('line')
+    expect(screen.queryByRole('listbox')).toBeNull()
+    await press('Enter')
+    expect(nodes()).toEqual([])
+  })
+
+  it('keeps focus in the text when the list’s own panel is pressed (its scrollbar)', async () => {
+    render(<Page />)
+    await type('see [')
+    const panel = screen.getByRole('listbox').closest('[role="dialog"]')!
+    const pressed = new MouseEvent('mousedown', { bubbles: true, cancelable: true })
+    panel.dispatchEvent(pressed)
+    expect(pressed.defaultPrevented).toBe(true)
+    // A press anywhere else on the page is left alone.
+    const elsewhere = new MouseEvent('mousedown', { bubbles: true, cancelable: true })
+    other().dispatchEvent(elsewhere)
+    expect(elsewhere.defaultPrevented).toBe(false)
+  })
+
+  it('keeps the list when the window loses focus, not the page', async () => {
+    render(<Page />)
+    await type('see [')
+    // What a browser sends when another window takes focus: a blur, with the editor still the active element.
+    await act(async () => {
+      editor!.view.dom.dispatchEvent(new FocusEvent('blur'))
+    })
+    expect(document.activeElement).toBe(editor!.view.dom)
+    expect(options()).toHaveLength(6)
+    expect(isSuggestionOpen()).toBe(true)
+  })
+
+  it('still picks a row by mouse, which never takes focus from the text', async () => {
+    render(<Page />)
+    await type('see [')
+    const row = within(screen.getByRole('listbox')).getAllByRole('option')[2]
+    await act(async () => {
+      fireEvent.mouseDown(row)
+    })
+    expect(nodes()).toEqual([{ type: 'messageMention', attrs: { id: ITEMS[4].id, label: 'Ada', snippet: 'line 4', uri: ITEMS[4].uri } }])
+    expect(isSuggestionOpen()).toBe(false)
+  })
+})
+
 describe('a chip through HTML (copy and paste)', () => {
   it('keeps who it names and what it points at, and takes no key or uri from a crafted attribute', async () => {
     render(<Composer />)

package/src/ComposerTriggers.tsx

@@ -81,10 +81,26 @@ function optionsOf<T>(editor: Editor, name: string): T | undefined {
   return editor.extensionManager.extensions.find((one) => one.name === name)?.options as T | undefined
 }
 
+/**
+ * A list keeps listening across spaces, so a name or a title can be more than
+ * one word (f586437a, Miky 2026-10-06). It stops at a new line, Escape, a pick
+ * or the cursor leaving — Suggestion's own — and once the query holds `stop`:
+ * `]` for `[`, so "see [the notes] above" ends as text. While nothing matches,
+ * the list is hidden rather than closed, and comes back if the words match again.
+ * A space straight after the key is prose ("meet @ 5pm", "- [ ] task"), not a
+ * query: every two-word name holds a space.
+ */
+const listening = (stop: string) => ({
+  allowSpaces: true,
+  shouldShow: ({ query }: { query: string }) => !/^\s/.test(query) && !query.includes(stop),
+})
+
 /** `@`'s list and pick, or `!@`'s, for the node `name` — the extension's own, so a renamed one still finds its people. */
 function personSuggestion(urgent: boolean, name: string) {
   return {
     ...(urgent ? { char: '!@' } : {}),
+    // A second `@` starts another mention; the first one has ended.
+    ...listening('@'),
     items: ({ query, editor }: { query: string; editor: Editor }) => filterPeople(optionsOf<PersonMentionOptions>(editor, name)?.people() ?? [], query),
     render: suggestionPopup(peopleMenu(urgent)),
     command: ({ editor, range, props: person }: { editor: Editor; range: { from: number; to: number }; props: MentionPerson }) => {
@@ -366,6 +382,7 @@ export const ReferenceTrigger = Extension.create<ReferenceTriggerOptions>({
         editor: this.editor,
         char: '[',
         pluginKey: new PluginKey('referenceTrigger'),
+        ...listening(']'),
         // As a mention's: only where the chip may go.
         allow: ({ state, range }) => {
           const type = state.schema.nodes[options.nodeName]

package/src/SuggestionMenu.tsx

@@ -138,6 +138,16 @@ export function SuggestionMenu<T>({ rect, editorElement, ariaLabel, width, maxHe
     if (!editorElement || !open) return
     editorElement.setAttribute('aria-activedescendant', `${base}-${highlight}`)
   }, [editorElement, open, base, highlight])
+  // A press anywhere in the panel — its padding, its scrollbar — keeps focus in
+  // the text, as a row's does: the editor ends its list when it loses focus.
+  // On the list's own mount, because the panel portals in after it opens.
+  const keepFocus = useCallback((list: HTMLDivElement | null) => {
+    const panel = list?.closest('[role="dialog"]')
+    if (!panel) return
+    const keep = (event: Event) => event.preventDefault()
+    panel.addEventListener('mousedown', keep)
+    return () => panel.removeEventListener('mousedown', keep)
+  }, [])
 
   const scrollRef = useCallback((el: HTMLElement | null) => {
     el?.scrollIntoView({ block: 'nearest' })
@@ -180,7 +190,7 @@ export function SuggestionMenu<T>({ rect, editorElement, ariaLabel, width, maxHe
       {/* The list the editor drives from its caret: a listbox, because Base UI's lists need a text field of their own.
           `gap-0.5`: 2px between rows, as a menu's — a section with a heading
           had them from `MenuSection`, and rows without one touched. */}
-      <div id={listboxId} role="listbox" aria-label={ariaLabel} className="flex flex-col gap-0.5">
+      <div ref={keepFocus} id={listboxId} role="listbox" aria-label={ariaLabel} className="flex flex-col gap-0.5">
         {shown.map((section, i) => (
           <div key={section.label ?? i} className="contents">
             {i > 0 && <MenuSeparator />}

package/src/suggestionPopup.tsx

@@ -1,7 +1,7 @@
 // @estiva-escape(component-has-a-page, component-has-a-story): draws nothing of its own — it opens a SuggestionMenu from a Tiptap suggestion plugin, and SuggestionMenu's page and stories show it (UIG-31)
 import { forwardRef, useRef, useImperativeHandle } from 'react'
 import { ReactRenderer } from '@tiptap/react'
-import type { SuggestionKeyDownProps, SuggestionOptions, SuggestionProps } from '@tiptap/suggestion'
+import { exitSuggestion, type SuggestionKeyDownProps, type SuggestionOptions, type SuggestionProps } from '@tiptap/suggestion'
 import { SuggestionMenu, type SuggestionMenuHandle, type SuggestionMenuRow, type SuggestionMenuSection } from './SuggestionMenu'
 
 /*
@@ -12,6 +12,13 @@ import { SuggestionMenu, type SuggestionMenuHandle, type SuggestionMenuRow, type
  * moment while one hands over to the other (`/` choosing "Mention" types `@`).
  * An editor asks before it acts on Enter or Escape, so a key that chose a row
  * does not also send the message or cancel the edit.
+ *
+ * A list counts while it shows rows, not while its trigger listens: since a
+ * space stopped closing one (f586437a), "meet @ 5pm" leaves `@` listening
+ * behind a hidden list to the end of the line, and that Enter must still send.
+ *
+ * And only while its editor has focus (71a4577b): a list left by a click ends,
+ * or it would stay counted and swallow Escape in the box clicked into.
  */
 let openCount = 0
 let lastClose = 0
@@ -99,13 +106,45 @@ export function suggestionPopup<T>(options: SuggestionPopupOptions<T>): NonNulla
     let container: HTMLDivElement | null = null
     let last: SuggestionProps<T> | null = null
     let unsubscribe: (() => void) | undefined
+    let counted = false
+    let unlisten: (() => void) | undefined
+    const count = (shown: boolean) => {
+      if (shown === counted) return
+      counted = shown
+      openCount = shown ? openCount + 1 : Math.max(0, openCount - 1)
+    }
+    // The plugin's state outlives a blur — no transaction runs — so leaving the
+    // box ends the query here, as Escape does: coming back finds no list, and
+    // Enter sends (Miky, 2026-10-06). Leaving the window is not leaving the box,
+    // and a press in the list's own panel never takes focus (SuggestionMenu).
+    const listen = (props: SuggestionProps<T>) => {
+      const { view } = props.editor
+      const dom = view.dom
+      const onBlur = () => {
+        // A window that loses focus leaves its active element where it was.
+        if (dom.contains(document.activeElement) || !last) return
+        const from = last.range.from
+        // Not a pick: no grace for the other box's Enter.
+        count(false)
+        for (const plugin of view.state.plugins) {
+          const state = plugin.getState(view.state) as { active?: boolean; range?: { from: number } } | undefined
+          if (state?.active && state.range?.from === from && plugin.spec.key) exitSuggestion(view, plugin.spec.key)
+        }
+      }
+      dom.addEventListener('blur', onBlur)
+      unlisten = () => dom.removeEventListener('blur', onBlur)
+    }
     const exit = () => {
       unsubscribe?.()
       unsubscribe = undefined
+      unlisten?.()
+      unlisten = undefined
       last = null
+      // The grace is for the Enter that picked a row and closed the list, not
+      // for a keystroke that only left it with no rows.
+      if (counted) lastClose = Date.now()
+      count(false)
       if (!component) return
-      openCount = Math.max(0, openCount - 1)
-      lastClose = Date.now()
       component.destroy()
       container?.remove()
       component = null
@@ -113,12 +152,13 @@ export function suggestionPopup<T>(options: SuggestionPopupOptions<T>): NonNulla
     }
     return {
       onStart: (props) => {
-        openCount++
+        count(props.items.length > 0)
         component = new ReactRenderer<SuggestionMenuHandle, Props<T>>(Popup as never, { props: { ...props, options }, editor: props.editor })
         container = document.createElement('div')
         document.body.appendChild(container)
         container.appendChild(component.element)
         last = props
+        listen(props)
         const { subscribe, refresh } = options
         if (subscribe && refresh) {
           // The plugin asks for items only when the query changes; an answer
@@ -126,12 +166,14 @@ export function suggestionPopup<T>(options: SuggestionPopupOptions<T>): NonNulla
           unsubscribe = subscribe(() => {
             if (!last || !component) return
             last = { ...last, items: refresh(last.query) }
+            count(last.items.length > 0)
             component.updateProps({ ...last, options })
           })
         }
       },
       onUpdate: (props) => {
         last = props
+        count(props.items.length > 0)
         component?.updateProps({ ...props, options })
       },
       onKeyDown: ({ event }: SuggestionKeyDownProps) => {