diff --git a/webapp/src/components/user_selector/autocomplete_selector.tsx b/webapp/src/components/user_selector/autocomplete_selector.tsx
index 09aadf18..9312cabc 100644
--- a/webapp/src/components/user_selector/autocomplete_selector.tsx
+++ b/webapp/src/components/user_selector/autocomplete_selector.tsx
@@ -3,6 +3,7 @@
 
 import React, {CSSProperties} from 'react';
 
+import {components} from 'react-select';
 import AsyncSelect from 'react-select/async';
 import {OptionsType, ValueType, Theme as ComponentTheme} from 'react-select/src/types';
 import {Props as ComponentProps, StylesConfig} from 'react-select/src/styles';
@@ -51,7 +52,7 @@ const useTheme = (mattermostTheme: Theme): [StylesConfig, ThemeConfig] => {
     return [styles, compTheme];
 };
 
-const renderOption = (option: UserProfile, {context} : {context: FormatOptionLabelContext}) => {
+const renderOption = (option: UserProfile, {context}: {context: FormatOptionLabelContext}) => {
     const {username} = option;
     const name = `@${username}`;
     const description = getDescription(option);
@@ -116,6 +117,13 @@ export default function AutocompleteSelector(props: Props) {
         );
     }
 
+    //@ts-ignore
+    const Input = (inputProps) => (
+        <components.Input
+            {...inputProps}
+            maxLength={22}
+        />);
+
     return (
         <div
             data-testid='autoCompleteSelector'
@@ -124,6 +132,7 @@ export default function AutocompleteSelector(props: Props) {
             {labelContent}
             <div className={inputClassName}>
                 <AsyncSelect
+                    components={{Input}}
                     autoFocus={Boolean(props.autoFocus)}
                     cacheOptions={true}
                     loadOptions={loadOptions}