Chats: focus textarea when navigating between chats (janky)

app/soapbox/features/chats/components/chat-composer.tsx

@@ -17,7 +17,7 @@ interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaEl
 }
 
 /** Textarea input for chats. */
-const ChatComposer = React.forwardRef<HTMLTextAreaElement, IChatComposer>(({
+const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>(({
   onKeyDown,
   onChange,
   value,

app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { blockAccount } from 'soapbox/actions/accounts';
@@ -32,6 +32,8 @@ const ChatPageMain = () => {
   const intl = useIntl();
   const account = useOwnAccount();
 
+  const inputRef = useRef<HTMLTextAreaElement| null>(null);
+
   const { chat, setChat } = useChatContext();
   const { isSilenced, handleSilence, fetchChatSilence } = useChatSilence(chat);
   const { deleteChat } = useChatActions(chat?.id as string);
@@ -162,7 +164,11 @@ const ChatPageMain = () => {
       </HStack>
 
       <div className='h-full overflow-hidden'>
-        <Chat className='h-full overflow-hidden' chat={chat} />
+        <Chat
+          className='h-full overflow-hidden'
+          chat={chat}
+          inputRef={inputRef}
+        />
       </div>
     </Stack>
   );

app/soapbox/features/chats/components/chat-widget/chat-window.tsx

@@ -26,7 +26,7 @@ const LinkWrapper = ({ enabled, to, children }: { enabled: boolean, to: string,
 const ChatWindow = () => {
   const { chat, setChat, isOpen, isEditing, needsAcceptance, setEditing, setSearching, toggleChatPane } = useChatContext();
 
-  const inputRef = useRef<HTMLTextAreaElement>();
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
   const closeChat = () => setChat(null);
 
@@ -93,7 +93,7 @@ const ChatWindow = () => {
       />
 
       <Stack className='overflow-hidden flex-grow h-full' space={2}>
-        <Chat chat={chat} inputRef={inputRef as any} />
+        <Chat chat={chat} inputRef={inputRef} />
       </Stack>
     </>
   );

app/soapbox/features/chats/components/chat.tsx

@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import classNames from 'clsx';
-import React, { MutableRefObject, useState } from 'react';
+import React, { MutableRefObject, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import { uploadMedia } from 'soapbox/actions/media';
@@ -20,7 +20,7 @@ const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
 interface ChatInterface {
   chat: IChat,
   autosize?: boolean,
-  inputRef?: MutableRefObject<HTMLTextAreaElement>,
+  inputRef?: MutableRefObject<HTMLTextAreaElement | null>,
   className?: string,
 }
 
@@ -203,6 +203,12 @@ const Chat: React.FC<ChatInterface> = ({ chat, autosize, inputRef, className })
     // );
   };
 
+  useEffect(() => {
+    if (inputRef?.current) {
+      inputRef.current.focus();
+    }
+  }, [chat.id, inputRef?.current]);
+
   return (
     <Stack className={classNames('overflow-hidden flex flex-grow', className)} onMouseOver={handleMouseOver}>
       <div className='flex-grow h-full overflow-hidden flex justify-center'>