[MM-51302] Fix scroll to the bottom of editor after pasting long text (#22491)

Automatic Merge

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx

@@ -131,7 +131,7 @@ const AdvanceTextEditor = ({
     canUploadFiles,
     enableEmojiPicker,
     enableGifPicker,
-    handleBlur,
+    handleBlur: onBlur,
     handlePostError,
     emitTypingEvent,
     handleMouseUpKeyUp,
@@ -170,6 +170,7 @@ const AdvanceTextEditor = ({
     const [scrollbarWidth, setScrollbarWidth] = useState(0);
     const [renderScrollbar, setRenderScrollbar] = useState(false);
     const [showFormattingSpacer, setShowFormattingSpacer] = useState(shouldShowPreview);
+    const [keepEditorInFocus, setKeepEditorInFocus] = useState(false);
 
     const input = textboxRef.current?.getInputBox();
 
@@ -187,6 +188,15 @@ const AdvanceTextEditor = ({
         setShowPreview(!shouldShowPreview);
     }, [shouldShowPreview, setShowPreview]);
 
+    const handleBlur = useCallback(() => {
+        onBlur?.();
+        setKeepEditorInFocus(false);
+    }, [onBlur]);
+
+    const handleFocus = useCallback(() => {
+        setKeepEditorInFocus(true);
+    }, []);
+
     let serverErrorJsx = null;
     if (serverError) {
         serverErrorJsx = (
@@ -422,6 +432,7 @@ const AdvanceTextEditor = ({
                 />
             )}
             slot2={null}
+            shouldScrollIntoView={keepEditorInFocus}
         />
     );
 
@@ -479,6 +490,7 @@ const AdvanceTextEditor = ({
                             handlePostError={handlePostError}
                             value={messageValue}
                             onBlur={handleBlur}
+                            onFocus={handleFocus}
                             emojiEnabled={enableEmojiPicker}
                             createMessage={createMessage}
                             channelId={channelId}

webapp/channels/src/components/textbox/textbox.tsx

@@ -44,6 +44,7 @@ export type Props = {
     onMouseUp?: (e: React.MouseEvent<TextboxElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent<TextboxElement>) => void;
     onBlur?: (e: FocusEvent<TextboxElement>) => void;
+    onFocus?: (e: FocusEvent<TextboxElement>) => void;
     supportsCommands?: boolean;
     handlePostError?: (message: JSX.Element | null) => void;
     onPaste?: (e: ClipboardEvent) => void;
@@ -312,6 +313,7 @@ export default class Textbox extends React.PureComponent<Props> {
                     onKeyUp={this.handleKeyUp}
                     onComposition={this.props.onComposition}
                     onBlur={this.handleBlur}
+                    onFocus={this.props.onFocus}
                     onHeightChange={this.props.onHeightChange}
                     onWidthChange={this.props.onWidthChange}
                     onPaste={this.props.onPaste}