Fix {enter} press in RTE

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

@@ -29,9 +29,14 @@ export function useInputEventProcessor(onSend: () => void): (event: WysiwygEvent
 
             const isKeyboardEvent = event instanceof KeyboardEvent;
             const isEnterPress =
-                !isCtrlEnter && (isKeyboardEvent ? event.key === "Enter" : event.inputType === "insertParagraph");
+                !isCtrlEnter &&
+                (isKeyboardEvent
+                    ? // 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
+                      event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey
+                    : event.inputType === "insertParagraph");
             // sendMessage is sent when ctrl+enter is pressed
-            const isSendMessage = !isKeyboardEvent && event.inputType === "sendMessage";
+            const isSendMessage = !isKeyboardEvent && isCtrlEnter && event.inputType === "sendMessage";
 
             if (isEnterPress || isSendMessage) {
                 event.stopPropagation?.();

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", () => {