From f396584370c24d34aa341958690686948956db53 Mon Sep 17 00:00:00 2001
From: jufab fab <julien.fabre.33@gmail.com>
Date: Fri, 20 Oct 2023 00:27:04 +0000
Subject: [PATCH] fix(issue#150): add maxlength on input

---
 .../src/components/user_selector/autocomplete_selector.tsx  | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/webapp/src/components/user_selector/autocomplete_selector.tsx b/webapp/src/components/user_selector/autocomplete_selector.tsx
index 09aadf18..d8f368a5 100644
--- a/webapp/src/components/user_selector/autocomplete_selector.tsx
+++ b/webapp/src/components/user_selector/autocomplete_selector.tsx
@@ -16,6 +16,7 @@ import {FormatOptionLabelContext} from 'react-select/src/Select';
 import {getColorStyles, getDescription, getProfilePicture} from '../../utils';
 
 import './autocomplete_selector.scss';
+import {components} from 'react-select';
 
 type Props = {
     loadOptions: (inputValue: string, callback: ((options: OptionsType<UserProfile>) => void)) => Promise<unknown> | void,
@@ -30,6 +31,7 @@ type Props = {
     theme: Theme,
 }
 
+
 const useTheme = (mattermostTheme: Theme): [StylesConfig, ThemeConfig] => {
     const mmColors = getColorStyles(mattermostTheme);
 
@@ -116,6 +118,9 @@ export default function AutocompleteSelector(props: Props) {
         );
     }
 
+    //@ts-ignore
+    const Input = (props) => <components.Input {...props} maxLength={22} />;
+
     return (
         <div
             data-testid='autoCompleteSelector'
@@ -124,6 +129,7 @@ export default function AutocompleteSelector(props: Props) {
             {labelContent}
             <div className={inputClassName}>
                 <AsyncSelect
+                    components={{Input}}
                     autoFocus={Boolean(props.autoFocus)}
                     cacheOptions={true}
                     loadOptions={loadOptions}