Skip to main content
Version: v5

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#

cooldownActive#

Whether there is currently a cool-down active in a channel with slow mode enabled.

typedefault
booleanfalse

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?