diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts index fb36bbf2d1..3a223fb6b1 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts +++ b/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("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(); diff --git a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx index 43dce76c7f..7353acb6b2 100644 --- a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx +++ b/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", () => {