Fix {enter} press in RTE (#9927)

Fix enter combination in RTE

Author: florianduros

src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts

@@ -19,6 +19,12 @@ import { useCallback } from "react";
 
 import { useSettingValue } from "../../../../../hooks/useSettings";
 
+function isEnterPressed(event: KeyboardEvent): boolean {
+    // Ugly but here we need to send the message only if Enter is pressed
+    // And we need to stop the event propagation on enter to avoid the composer to grow
+    return event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+
 export function useInputEventProcessor(onSend: () => void): (event: WysiwygEvent) => WysiwygEvent | null {
     const isCtrlEnter = useSettingValue<boolean>("MessageComposerInput.ctrlEnterToSend");
     return useCallback(
@@ -28,12 +34,12 @@ export function useInputEventProcessor(onSend: () => void): (event: WysiwygEvent
             }
 
             const isKeyboardEvent = event instanceof KeyboardEvent;
-            const isEnterPress =
-                !isCtrlEnter && (isKeyboardEvent ? event.key === "Enter" : event.inputType === "insertParagraph");
-            // sendMessage is sent when ctrl+enter is pressed
-            const isSendMessage = !isKeyboardEvent && event.inputType === "sendMessage";
+            const isEnterPress = !isCtrlEnter && isKeyboardEvent && isEnterPressed(event);
+            const isInsertParagraph = !isCtrlEnter && !isKeyboardEvent && event.inputType === "insertParagraph";
+            // sendMessage is sent when cmd+enter is pressed
+            const isSendMessage = isCtrlEnter && !isKeyboardEvent && event.inputType === "sendMessage";
 
-            if (isEnterPress || isSendMessage) {
+            if (isEnterPress || isInsertParagraph || isSendMessage) {
                 event.stopPropagation?.();
                 event.preventDefault?.();
                 onSend();

test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import "@testing-library/jest-dom";
 import React from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import { WysiwygComposer } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer";
 import SettingsStore from "../../../../../../src/settings/SettingsStore";
@@ -87,6 +88,45 @@ describe("WysiwygComposer", () => {
             // Then it sends a message
             await waitFor(() => expect(onSend).toBeCalledTimes(1));
         });
+
+        it("Should not call onSend when Shift+Enter is pressed ", async () => {
+            //When
+            await userEvent.type(screen.getByRole("textbox"), "{shift>}{enter}");
+
+            // Then it sends a message
+            await waitFor(() => expect(onSend).toBeCalledTimes(0));
+        });
+
+        it("Should not call onSend when ctrl+Enter is pressed ", async () => {
+            //When
+            // Using userEvent.type or .keyboard wasn't working as expected in the case of ctrl+enter
+            fireEvent(
+                screen.getByRole("textbox"),
+                new KeyboardEvent("keydown", {
+                    ctrlKey: true,
+                    code: "Enter",
+                }),
+            );
+
+            // Then it sends a message
+            await waitFor(() => expect(onSend).toBeCalledTimes(0));
+        });
+
+        it("Should not call onSend when alt+Enter is pressed ", async () => {
+            //When
+            await userEvent.type(screen.getByRole("textbox"), "{alt>}{enter}");
+
+            // Then it sends a message
+            await waitFor(() => expect(onSend).toBeCalledTimes(0));
+        });
+
+        it("Should not call onSend when meta+Enter is pressed ", async () => {
+            //When
+            await userEvent.type(screen.getByRole("textbox"), "{meta>}{enter}");
+
+            // Then it sends a message
+            await waitFor(() => expect(onSend).toBeCalledTimes(0));
+        });
     });
 
     describe("When settings require Ctrl+Enter to send", () => {