494d92d74c
* initial setup of component * initial styles applied * add some initial docs * small tweaks to story * add some very initial tests * tweaks to styles to add border bottom * add some preact tests * import default style in jsx, ignore in jest * WIP - create MentionAutocompleteListener, attempt to position popover * position dropdown correctly, exit selection in various scenarios * refactor * make sure cursor placed correctly after selection * only import autocomplete when needed * rename files, add jsdoc * update tests and story notes * tidy up scss file * fix story styling * fix aria label in story * fix issue with key event not triggering in mobile * position dropdown at input left if small screen * fix issue with deleting and re-entering * don't trigger search if directly following a letter or number * stop change event being fired with highihted text * move regex out of function into constant
923 B
923 B
Mention autocomplete
The mention autocomplete component uses the Reach UI Combobox under the hood. It can be used for searching for users by username by passing in a reference to the relevant text area.
The autocomplete will begin fetching suggestions once a user has type '@' plus at least two characters. A user's selection is confirmed when they either:
- Click on a search option
- Hit enter on a search option
- Click away from the dropdown
- Enter space to move away from the autocomplete
Mention autocomplete accessibility
The component works by switching focus to an invisible combobox input once the user types @. Focus is sent back to the original textarea when selection is completed. The underlying Reach UI Combobox behavior conforms to the WAI_ARIA guidelines on comboboxes.