Skip to main content
Version: v3

AutoCompleteInput

Component to render input box within the MessageInput. This component provides autocomplete functionality for the commands and mentions feature. Commands suggestions will show up when user types "/" while mentions suggestions will show up when user types "@."

Check the [Customize Message Input guide](Customize Message Input) for more details on how to customize this component

Props

overrides the value from MessageInputContext
additionalTextInputProps

Additional props provided to the underlying TextInput within MessageInput.

Type
object

overrides the value from MessageInputContext
autoCompleteSuggestionsLimit

Maximum number of suggestions to display as part of autocomplete feature within input box.

TypeDefault
number10

overrides the value from SuggestionsContext
closeSuggestions

Function to close the autocomplete suggestions popup.

Type
function

overrides the value from MessageInputContext
giphyActive

True if a user selects the giphy command from commands list (which is shown when you type a / in the input box). This value is set back to false when the user sends the message for searching Giphy.

Type
boolean

overrides the value from ChannelContext
giphyEnabled

Enable Giphy commands feature on the MessageInput component.

TypeDefault
booleantrue

overrides the value from MessageInputContext
maxMessageLength

Maximum length of the message text. The default value is supplied by the channel config.

Type
number

overrides the value from MessageInputContext
numberOfLines

Maximum number of lines that underlying TextInput component within MessageInput should expand to.

TypeDefault
number5

overrides the value from MessageInputContext
mentionAllAppUsersEnabled

Allows any of the app users to be mentioned in a message, as part of autocomplete feature within input box. By default only members of channel can be mentioned while composing a message.

TypeDefault
booleanfalse

overrides the value from MessageInputContext
mentionAllAppUsersQuery

Query to be used for searching users as part of autocomplete mention feature within input box. Please check the Querying Users docs for more details on filters/sort/options.

mentionAllAppUsersQuery={{
filters: {
id: {
$in: ['vishal', 'lucas']
}
},
sort: {},
options: {}
}}
Type
object

overrides the value from MessageInputContext
onChange

overrides the value from SuggestionsContext
openSuggestions

Function to open the autocomplete suggestions popup. This function takes following two parameters:

  • component - You can either pass a string or a react element.
    • string - enum('MentionsItem' | 'CommandsItem' | 'EmojisItem'). Based on value, one of the default components will be rendered as list item within suggestions list.
    • element - React element which takes item as a prop, which is a suggestion item within list set using updateSuggestions. This element is used to render item in the suggestions list.
  • title - component to render a title for suggestions list.
Type
function

overrides the value from MessageInputContext
setGiphyActive

Setter function for giphyActive

Type
(isActive) => void

overrides the value from MessageInputContext
setInputBoxRef

Setter function for inputBoxRef

Type
(ref) => void

overrides the value from MessageInputContext
setShowMoreOptions

Setter function for showMoreOptions.

Type
(showMoreOptions) => void

overrides the value from MessageInputContext
text

Text message entered by user in underlying TextInput within MessageInput component. This value is attached to TextInput's value prop

Type
string

overrides the value from MessageInputContext
triggerSettings

Trigger settings for the auto complete input.

TypeDefault
objectTriggerSettings

overrides the value from SuggestionsContext
updateSuggestions

Update the suggestions in autocomplete suggestions list. This function takes following two parameters:

  • suggestions - { data: array<object>, onSelect: function }
  • title - new title component for suggestions list.
Type
function

Did you find this page helpful?