Comment Composer Mentions Submit

When to use it

Use it for comment threads on documents, tickets and pull requests, where Enter adds a line, Ctrl or Cmd+Enter posts, and the author needs to know who will be told.

Do not use it when you only need the mention list. Use a mention input.

Installation

Props

| Prop | Type | Default | Description | | --------------- | --------------------------------- | -------------- | ---------------------- | ------------------------------------------------------------- | | people | { id, name }[] | - | Who can be mentioned. | | onSubmit | ({ text, mentioned }) => void \\ | Promise<void> | - | Posts the comment. Reject to keep the text and show an error. | | maxLength | number | 500 | Longest comment. | | value | string | - | The text (controlled). | | defaultValue | string | "" | Initial text. | | onValueChange | (value: string) => void | - | Runs on every change. |

Accessibility

• The mention list follows the usual combobox pattern; Enter inserts a mention while it is open and adds a line otherwise.
• The counter (120 of 500) is a polite status that turns into 380 over the limit text, not only a colour change; the Post button is aria-disabled with a reason.
• Ctrl or Cmd+Enter works from the textarea even when the button is not visible; it does nothing when the comment is not valid and says why.
• A failed post keeps the text and shows Could not post. Your comment is still here. in an alert.

Testing

The pattern ships with a Testing Library test (comment-composer-mentions-submit.test.tsx) that covers mention insertion, the submit shortcut, validation, the counter and a failed post keeping the text.