Merge branch 'chat-resize-reset' into 'develop'

Chats: reset chat message field height after sending a message

See merge request soapbox-pub/soapbox!2277

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Groups: initial support for groups.
 - Profile: add RSS link to user profiles.
 - Posts: fix posts filtering.
+- Chats: reset chat message field height after sending a message.
 
 ### Changed
 - Chats: improved display of media attachments.

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

@@ -42,6 +42,7 @@ interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaEl
   errorMessage: string | undefined
   onSelectFile: (files: FileList, intl: IntlShape) => void
   resetFileKey: number | null
+  resetContentKey: number | null
   attachments?: Attachment[]
   onDeleteAttachment?: () => void
   isUploading?: boolean
@@ -58,6 +59,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
   disabled = false,
   onSelectFile,
   resetFileKey,
+  resetContentKey,
   onPaste,
   attachments = [],
   onDeleteAttachment,
@@ -179,6 +181,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
         <Stack grow>
           <Combobox onSelect={onSelectComboboxOption}>
             <ComboboxInput
+              key={resetContentKey}
               as={ChatTextarea}
               autoFocus
               ref={ref}
@@ -250,4 +253,4 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
   );
 });
 
-export default ChatComposer;
+export default ChatComposer;

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

@@ -54,6 +54,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
   const [attachment, setAttachment] = useState<any>(undefined);
   const [isUploading, setIsUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
+  const [resetContentKey, setResetContentKey] = useState<number>(fileKeyGen());
   const [resetFileKey, setResetFileKey] = useState<number>(fileKeyGen());
   const [errorMessage, setErrorMessage] = useState<string>();
 
@@ -83,6 +84,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
     setIsUploading(false);
     setUploadProgress(0);
     setResetFileKey(fileKeyGen());
+    setResetContentKey(fileKeyGen());
   };
 
   const sendMessage = () => {
@@ -171,6 +173,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
         errorMessage={errorMessage}
         onSelectFile={handleFiles}
         resetFileKey={resetFileKey}
+        resetContentKey={resetContentKey}
         onPaste={handlePaste}
         attachments={attachment ? [attachment] : []}
         onDeleteAttachment={handleRemoveFile}