This adds a few options that allow you to control the emoji picker programmatically.
I'm building inside a contenteditable editor, and want users to select emojis by typing in the text area. (Similar to how you can press : in slack or github and get a menu of emojis.) Since users are already typing in an input area, I don't want them to have to move to the search field that is rendered inside the emoji picker; I want to supply the characters the user has typed in my editor and use that to filter the results.
This PR supports this use case by adding these options:
search: string - Sets the current search query used to filter the emoji list. This works regardless of whether searchDisabled is set.
onReturnFocus: () => void - If searchDisabled is set, this function will be called when user keyboard navigation would have returned focus to the search input field.
api: RefObject<EmojiPickerApi> - Provides you access to an imperative API that your component can use. These methods are available:
takeFocus() - sets focus to the first interactive element in the picker UI. Similar to pressing ↓ when focus is in the picker's search input.
activate() - selects the first visible emoji. Similar to pressing Enter when focus is in the search input.
This adds a few options that allow you to control the emoji picker programmatically.
I'm building inside a
contenteditable
editor, and want users to select emojis by typing in the text area. (Similar to how you can press : in slack or github and get a menu of emojis.) Since users are already typing in an input area, I don't want them to have to move to the search field that is rendered inside the emoji picker; I want to supply the characters the user has typed in my editor and use that to filter the results.This PR supports this use case by adding these options:
search
:string
- Sets the current search query used to filter the emoji list. This works regardless of whethersearchDisabled
is set.onReturnFocus
:() => void
- IfsearchDisabled
is set, this function will be called when user keyboard navigation would have returned focus to the search input field.api
:RefObject<EmojiPickerApi>
- Provides you access to an imperative API that your component can use. These methods are available:takeFocus()
- sets focus to the first interactive element in the picker UI. Similar to pressing ↓ when focus is in the picker's search input.activate()
- selects the first visible emoji. Similar to pressing Enter when focus is in the search input.For example:
You can use these three options together to implement pretty seamless search and keyboard navigation glued to an external UI.