Implementation:FlowiseAI Flowise SuggestionList

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Autocomplete
Last Updated	2026-02-12 07:00 GMT

Overview

The SuggestionList component renders a keyboard-navigable, categorized dropdown list of mention suggestions used by the Tiptap editor's suggestion plugin.

Description

SuggestionList is a forwardRef React component that displays suggestion items grouped by category (e.g., "Chat Context", "Node Outputs", "Flow Variables") inside a Material-UI Paper and List. It tracks a selected index and exposes an onKeyDown handler via useImperativeHandle to support keyboard navigation with ArrowUp, ArrowDown, and Enter keys. When an item is selected, it calls the command prop with the mention's id and label to insert the mention token into the Tiptap editor.

Usage

This component is used internally by the suggestionOptions render lifecycle as the popup content for the Tiptap mention suggestion system. It is not typically used directly by application code.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/input/SuggestionList.jsx
• Lines: 1-192

Signature

const SuggestionList = forwardRef((props, ref) => {
    // ...
})
export default SuggestionList

Import

import SuggestionList from '@/ui-component/input/SuggestionList'

I/O Contract

Inputs

Name	Type	Required	Description
items	array of objects	Yes	Array of suggestion objects with id (string), mentionLabel (string), optional label, description, and category
command	func	Yes	Callback to execute when a suggestion is selected; receives { id, label }
tippyInstance	object	No	Reference to the Tippy.js popover instance for placement configuration

Outputs

Name	Type	Description
Rendered JSX	React element or null	A scrollable, categorized list of selectable suggestion items, or null if items is empty
ref.onKeyDown	func	Imperative handler for keyboard events (ArrowUp, ArrowDown, Enter)

Usage Examples

Basic Usage

// Used internally by the Tiptap suggestion render lifecycle:
component = new ReactRenderer(SuggestionList, {
    props: {
        items: [
            { id: 'question', mentionLabel: 'question', description: "User's question", category: 'Chat Context' },
            { id: 'chat_history', mentionLabel: 'chat_history', description: 'Past conversation', category: 'Chat Context' }
        ],
        command: (mentionItem) => editor.commands.insertMention(mentionItem)
    },
    editor: props.editor
})

Related Pages

• Principle:FlowiseAI_Flowise_Node_Parameter_Configuration