Keyboard Navigation

When you trigger the mention modal by typing @ (or your custom trigger), you can use the following keyboard controls to navigate and select options:

• Up Arrow / Down Arrow: Move the selection up or down in the list.
• Enter or Tab: Select the currently highlighted option.
• Escape (Esc): Close the modal without making a selection.
• Left Arrow / Right Arrow: Navigate into mention chips for enhanced text editing.

This allows for fast, accessible navigation and selection of mention options using only the keyboard. The contentEditable architecture provides enhanced cursor navigation, including the ability to navigate into existing mention chips with the left arrow key.

Custom Keyboard Handling

You can add custom keyboard event handling using the onKeyDown prop. This is useful for implementing form submission, keyboard shortcuts, or other custom interactions.

<MentionInput
  onKeyDown={(event) => {
    // Handle form submission with Enter
    if (event.key === "Enter") {
      event.preventDefault();
      handleSubmit();
    }

    // Custom keyboard shortcuts
    if (event.ctrlKey && event.key === "s") {
      event.preventDefault();
      saveContent();
    }
  }}
/>

Note: When the mention modal is open, the component handles Enter, Tab, Escape, and arrow keys internally for navigation and selection. Your onKeyDown handler will not be called for these keys when the modal is active.