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 1/2] 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}

From 5c3d54e1d1d1f33815e188ebccc3301c7d6030d7 Mon Sep 17 00:00:00 2001
From: jufab fab <julien.fabre.33@gmail.com>
Date: Fri, 20 Oct 2023 17:02:51 +0000
Subject: [PATCH 2/2] fix: lint problems

---
 .../user_selector/autocomplete_selector.tsx           | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/user_selector/autocomplete_selector.tsx b/webapp/src/components/user_selector/autocomplete_selector.tsx
index d8f368a5..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';
@@ -16,7 +17,6 @@ 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,
@@ -31,7 +31,6 @@ type Props = {
     theme: Theme,
 }
 
-
 const useTheme = (mattermostTheme: Theme): [StylesConfig, ThemeConfig] => {
     const mmColors = getColorStyles(mattermostTheme);
 
@@ -53,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);
@@ -119,7 +118,11 @@ export default function AutocompleteSelector(props: Props) {
     }
 
     //@ts-ignore
-    const Input = (props) => <components.Input {...props} maxLength={22} />;
+    const Input = (inputProps) => (
+        <components.Input
+            {...inputProps}
+            maxLength={22}
+        />);
 
     return (
         <div