fix: keep focused textarea when message composer state changes (#2759)

Author: MartinCupela

src/components/MessageInput/EditMessageForm.tsx

@@ -86,6 +86,7 @@ export const EditMessageModal = ({
     >
       <MessageInput
         clearEditingState={clearEditingState}
+        focus
         hideSendButton
         Input={EditMessageInput}
         {...additionalMessageInputProps}

src/components/TextareaComposer/TextareaComposer.tsx

@@ -9,7 +9,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Textarea from 'react-textarea-autosize';
 import { useMessageComposer } from '../MessageInput';
 import type {
+  AttachmentManagerState,
   MessageComposerConfig,
+  MessageComposerState,
   SearchSourceState,
   TextComposerState,
 } from 'stream-chat';
@@ -36,6 +38,14 @@ const configStateSelector = (state: MessageComposerConfig) => ({
   enabled: state.text.enabled,
 });
 
+const messageComposerStateSelector = (state: MessageComposerState) => ({
+  quotedMessage: state.quotedMessage,
+});
+
+const attachmentManagerStateSelector = (state: AttachmentManagerState) => ({
+  attachments: state.attachments,
+});
+
 /**
  * isComposing prevents double submissions in Korean and other languages.
  * starting point for a read:
@@ -78,14 +88,14 @@ export const TextareaComposer = ({
   const {
     additionalTextareaProps,
     cooldownRemaining,
+    focus,
     handleSubmit,
     maxRows: maxRowsContext,
     minRows: minRowsContext,
     onPaste,
     shouldSubmit: shouldSubmitContext,
     textareaRef,
   } = useMessageInputContext();
-
   const maxRows = maxRowsProp ?? maxRowsContext ?? 1;
   const minRows = minRowsProp ?? minRowsContext;
   const placeholder = placeholderProp ?? additionalTextareaProps?.placeholder;
@@ -99,6 +109,14 @@ export const TextareaComposer = ({
   );
 
   const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
+  const { quotedMessage } = useStateStore(
+    messageComposer.state,
+    messageComposerStateSelector,
+  );
+  const { attachments } = useStateStore(
+    messageComposer.attachmentManager.state,
+    attachmentManagerStateSelector,
+  );
 
   const { isLoadingItems } =
     useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
@@ -235,6 +253,12 @@ export const TextareaComposer = ({
     }
   }, [textComposer.suggestions]);
 
+  useEffect(() => {
+    const textareaIsFocused = textareaRef.current?.matches(':focus');
+    if (!textareaRef.current || textareaIsFocused || !focus) return;
+    textareaRef.current.focus();
+  }, [attachments, focus, quotedMessage, textareaRef]);
+
   return (
     <div
       className={clsx(