fix: focus message composer textarea on quoted message value change

Author: MartinCupela

src/components/MessageInput/QuotedMessagePreview.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { CloseIcon } from './icons';
 import { Attachment as DefaultAttachment } from '../Attachment';
@@ -12,6 +12,7 @@ import { useTranslationContext } from '../../context/TranslationContext';
 import { useStateStore } from '../../store';
 import { useMessageComposer } from './hooks';
 import { renderText as defaultRenderText } from '../Message/renderText';
+import { useMessageInputContext } from '../../context';
 import type { MessageComposerState, TranslationLanguages } from 'stream-chat';
 import type { MessageContextValue } from '../../context';
 
@@ -56,6 +57,7 @@ export const QuotedMessagePreview = ({
   const { Attachment = DefaultAttachment, Avatar = DefaultAvatar } =
     useComponentContext('QuotedMessagePreview');
   const { userLanguage } = useTranslationContext('QuotedMessagePreview');
+  const { focus, textareaRef } = useMessageInputContext();
   const messageComposer = useMessageComposer();
   const { quotedMessage } = useStateStore(
     messageComposer.state,
@@ -82,6 +84,12 @@ export const QuotedMessagePreview = ({
 
   const poll = quotedMessage?.poll_id && client.polls.fromState(quotedMessage.poll_id);
 
+  useEffect(() => {
+    const textareaIsFocused = textareaRef.current?.matches(':focus');
+    if (!textareaRef.current || textareaIsFocused || !focus) return;
+    textareaRef.current.focus();
+  }, [focus, quotedMessage, textareaRef]);
+
   if (!quotedMessageText && !quotedMessageAttachments.length && !poll) return null;
 
   return (