MM-66937 Fix broken IME handling in Find Channels modal (#35264) (#35798)

* MM-66937 Add E2E tests for bug

* MM-66937 Remove delayInputUpdate on that input to fix the bug

* Remove delayInputUpdate prop from QuickInput and SuggestionBox

* Run prettier

* Inline updateInputFromProps and remove eslint-disable that's no longer needed

* Fix snapshots

webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap

@@ -73,7 +73,6 @@ exports[`components/AddUserToChannelModal should match snapshot 1`] = `
         <Connect(SuggestionBox)
           className="form-control focused"
           completeOnTab={false}
-          delayInputUpdate={true}
           listComponent={[Function]}
           listPosition="bottom"
           maxLength="64"

webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx

@@ -270,7 +270,6 @@ export default class AddUserToChannelModal extends React.PureComponent<Props, St
                 providers={this.suggestionProviders}
                 listPosition='bottom'
                 completeOnTab={false}
-                delayInputUpdate={true}
                 openWhenEmpty={false}
             />
         );

webapp/channels/src/components/quick_input/quick_input.tsx

@@ -11,12 +11,6 @@ import WithTooltip from 'components/with_tooltip';
 
 export type Props = {
 
-    /**
-     * Whether to delay updating the value of the textbox from props. Should only be used
-     * on textboxes that to properly compose CJK characters as the user types.
-     */
-    delayInputUpdate?: boolean;
-
     /**
      * An optional React component that will be used instead of an HTML input when rendering
      */
@@ -92,7 +86,6 @@ const defaultClearableTooltipText = (
 // A component that can be used to make controlled inputs that function properly in certain
 // environments (ie. IE11) where typing quickly would sometimes miss inputs
 export const QuickInput = React.memo(({
-    delayInputUpdate = false,
     value = '',
     clearable = false,
     autoFocus,
@@ -119,23 +112,11 @@ export const QuickInput = React.memo(({
     }, []);
 
     useEffect(() => {
-        const updateInputFromProps = () => {
-            if (!inputRef.current || inputRef.current.value === value) {
-                return;
-            }
-
-            inputRef.current.value = value;
-        };
-
-        if (delayInputUpdate) {
-            requestAnimationFrame(updateInputFromProps);
-        } else {
-            updateInputFromProps();
+        if (!inputRef.current || inputRef.current.value === value) {
+            return;
         }
 
-        /* eslint-disable-next-line react-hooks/exhaustive-deps --
-         * This 'useEffect' should run only when 'value' prop changes.
-         **/
+        inputRef.current.value = value;
     }, [value]);
 
     const setInputRef = useCallback((input: HTMLInputElement) => {

webapp/channels/src/components/quick_switch_modal/__snapshots__/quick_switch_modal.test.tsx.snap

@@ -52,7 +52,6 @@ exports[`components/QuickSwitchModal should match snapshot 1`] = `
       aria-label="quick switch input"
       className="form-control focused"
       completeOnTab={false}
-      delayInputUpdate={true}
       forceSuggestionsWhenBlur={true}
       id="quickSwitchInput"
       listComponent={[Function]}

webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx

@@ -235,7 +235,6 @@ export class QuickSwitchModal extends React.PureComponent<Props, State> {
                         providers={providers}
                         completeOnTab={false}
                         spellCheck='false'
-                        delayInputUpdate={true}
                         openWhenEmpty={true}
                         onSuggestionsReceived={this.handleSuggestionsReceived}
                         forceSuggestionsWhenBlur={true}

webapp/channels/src/components/search_bar/search_bar.tsx

@@ -170,7 +170,6 @@ const SearchBar: React.FunctionComponent<Props> = (props: Props): JSX.Element =>
                     dateComponent={SuggestionDate}
                     providers={suggestionProviders}
                     type='search'
-                    delayInputUpdate={true}
                     renderDividers={['all']}
                     clearable={true}
                     onClear={props.handleClear}