fix: make character composition possible in textarea

Author: MartinCupela

src/components/MessageInput/__tests__/EditMessageForm.test.js

@@ -1287,7 +1287,14 @@ describe(`EditMessageForm`, () => {
         customChannel,
         customClient,
       });
-      await quotedMessagePreviewIsDisplayedCorrectly(mainListMessage);
+      await quotedMessagePreviewIsDisplayedCorrectly(
+        messageWithQuotedMessage.quoted_message,
+      );
+      await waitFor(() => {
+        const textarea = screen.getByPlaceholderText(inputPlaceholder);
+        expect(textarea).toBeInTheDocument();
+        expect(textarea.value).toBe(messageWithQuotedMessage.text);
+      });
     });
 
     it('renders proper markdown (through default renderText fn)', async () => {
@@ -1356,7 +1363,14 @@ describe(`EditMessageForm`, () => {
           customChannel,
         );
       });
-      await quotedMessagePreviewIsDisplayedCorrectly(mainListMessage);
+      await quotedMessagePreviewIsDisplayedCorrectly(
+        messageWithQuotedMessage.quoted_message,
+      );
+      await waitFor(() => {
+        const textarea = screen.getByPlaceholderText(inputPlaceholder);
+        expect(textarea).toBeInTheDocument();
+        expect(textarea.value).toBe(messageWithQuotedMessage.text);
+      });
     });
 
     it('is closed on original message delete', async () => {

src/components/TextareaComposer/TextareaComposer.tsx

@@ -235,6 +235,19 @@ export const TextareaComposer = ({
     }
   }, [textComposer.suggestions]);
 
+  useEffect(() => {
+    /**
+     * The textarea value has to be overridden outside the render cycle so that the events like compositionend can be triggered.
+     * If we have overridden the value during the component rendering, the compositionend event would not be triggered, and
+     * it would not be possible to type composed characters (ô).
+     * On the other hand, just removing the value override via prop (value={text}) would not allow us to change the text based on
+     * middleware results (e.g. replace characters with emojis)
+     */
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.value = text;
+  }, [textareaRef, text]);
+
   return (
     <div
       className={clsx(
@@ -271,7 +284,6 @@ export const TextareaComposer = ({
         ref={(ref) => {
           textareaRef.current = ref;
         }}
-        value={text}
       />
       {/* todo: X document the layout change for the accessibility purpose (tabIndex) */}
       {!isComposing && (