Session lifecycle

A “session” runs from the moment the trigger matches until the user dismisses the menu or selects an item. You can hook into open/close, query changes, and optional placeholder text and auto-close behavior.

Lifecycle callbacks

• onOpenChange(open) — menu opened or closed
• onSessionStart — session started; can return a cleanup function run when the session ends
• onSessionEnd — session ended (dismiss or select)
• onQueryChange(query) — query string changed

Auto-close and placeholder

autoCloseThreshold — after this many consecutive empty result sets (no items match), the menu auto-dismisses. Placeholder text is ghost text shown in the editor when the query is empty (e.g. “Search people…”). Styled via data-suggest-placeholder.

Close animation

When the menu closes, the decoration gets suggest-closing before removal. Use CSS transitions on that class for a smooth fade-out. See Animation in the Handbook.

Demos

Placeholder text (type @, see “Search people…”). Auto-close (gibberish query → menu dismisses after threshold). Close animation (Escape → smooth fade). Session callbacks (log panel of lifecycle events). See Storybook for interactive examples.