Mention

Mention component is used to refer someone or something.

Import#


import { Mention } from 'primereact/mention';

Basic#

Mention is used as a controlled component with suggestions and onSearch properties.


<Mention suggestions={suggestions} onSearch={onSearch} field="nickname" placeholder="Please enter @ to mention people"  rows={5} cols={40} itemTemplate={itemTemplate} />

Auto Resize#

InputMask is used as a controlled input with value and onChange properties, mask property is required to define the mask of the input.


<Mention suggestions={suggestions} onSearch={onSearch} field="nickname" placeholder="Please enter @ to mention people"  rows={5} cols={40} autoResize itemTemplate={itemTemplate} />

Float Label#

Please enter @ to mention people


<Mention suggestions={suggestions} onSearch={onSearch} field="nickname" placeholder="Please enter @ to mention people"  rows={5} cols={40} itemTemplate={itemTemplate} />

Disabled#

disabled prop prevents a textarea from being editable.


<Mention disabled suggestions={suggestions} onSearch={onSearch} field="nickname" placeholder="Please enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} />

Invalid#


<Mention inputClassName="p-invalid" suggestions={suggestions} onSearch={onSearch} field="nickname" placeholder="Please enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} />

Triggers#

It is used to define the expected keyword/s in the input field to mention someone or something.


<Mention suggestions={suggestions} onSearch={onSearch} field="nickname" placeholder="Please enter @ to mention people"  rows={5} cols={40} autoResize itemTemplate={itemTemplate} />

Form#

Compatibility with popular React form libraries.

Formik#


<Toast ref={toast} />
<Mention
    id="item"
    name="item"
    field="nickname"
    onSearch={onSearch}
    placeholder="Please enter @ to mention people"
    rows={5}
    cols={40}
    suggestions={suggestions}
    itemTemplate={itemTemplate}
    className={classNames({ 'p-invalid': isFormFieldInvalid('item') })}
    value={formik.values.item}
    onChange={(e) => {
        formik.setFieldValue('item', e.target.value);
    }}
/>
{getFormErrorMessage('item')}
<Button label="Submit" type="submit" icon="pi pi-check mt-2" />

Hook Form#

React Hook Form is another popular React library to handle forms.


<Controller
name="value"
control={form.control}
rules={{ required: 'Value is required.' }}
render={({ field, fieldState }) => (
    <Mention
        id={field.name}
        field="nickname"
        {...field}
        rows={5}
        cols={40}
        className={classNames({ 'p-invalid': fieldState.error })}
        suggestions={suggestions}
        onSearch={onSearch}
        placeholder="Please enter @ to mention people"
        itemTemplate={itemTemplate}
    />)}
/>

Style#

Following is the list of structural style classes

Name	Element
p-mention	Container element
p-mention-panel	Overlay panel of suggestions.
p-mention-items	List container of suggestions.
p-mention-item	List item of a suggestion.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Accessibility#

Screen Reader

Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition to aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct screen reader which option to read during keyboard navigation within the popup list.

The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the input element.


<label htmlFor="men1">Username</label>
<Mention inputId="men1" />

<span id="men2">Email</span>
<Mention aria-labelledby="men2" />

<Mention aria-label="City" />

Keyboard Support

Key	Function
tab	Moves focus to the input element when popup is not visible. If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element.
up arrow	Highlights the previous item if popup is visible.
down arrow	Highlights the next item if popup is visible.
enter	Selects the highlighted item and closes the popup if popup is visible.
home	Highlights the first item if popup is visible.
end	Highlights the last item if popup is visible.
escape	Hides the popup.

API#

Visit the API documentation for detailed information about all the properties, events and methods of the component.

Mention