Disable multiple messages when {enter} is pressed multiple times (#9929)

Author: florianduros

cypress/e2e/composer/composer.spec.ts

@@ -126,6 +126,21 @@ describe("Composer", () => {
             cy.contains(".mx_EventTile_body", "my message 1");
         });
 
+        it("sends only one message when you press Enter multiple times", () => {
+            // Type a message
+            cy.get("div[contenteditable=true]").type("my message 0");
+            // It has not been sent yet
+            cy.contains(".mx_EventTile_body", "my message 0").should("not.exist");
+
+            // Click send
+            cy.get("div[contenteditable=true]").type("{enter}");
+            cy.get("div[contenteditable=true]").type("{enter}");
+            cy.get("div[contenteditable=true]").type("{enter}");
+            // It has been sent
+            cy.contains(".mx_EventTile_body", "my message 0");
+            cy.get(".mx_EventTile_body").should("have.length", 1);
+        });
+
         it("can write formatted text", () => {
             cy.get("div[contenteditable=true]").type("my {ctrl+b}bold{ctrl+b} message");
             cy.get('div[aria-label="Send message"]').click();

src/components/views/rooms/MessageComposer.tsx

@@ -334,15 +334,16 @@ export class MessageComposer extends React.Component<IProps, IState> {
 
         if (this.state.isWysiwygLabEnabled) {
             const { permalinkCreator, relation, replyToEvent } = this.props;
-            await sendMessage(this.state.composerContent, this.state.isRichTextEnabled, {
+            const composerContent = this.state.composerContent;
+            this.setState({ composerContent: "", initialComposerContent: "" });
+            await sendMessage(composerContent, this.state.isRichTextEnabled, {
                 mxClient: this.props.mxClient,
                 roomContext: this.context,
                 permalinkCreator,
                 relation,
                 replyToEvent,
             });
             dis.dispatch({ action: Action.ClearAndFocusSendMessageComposer });
-            this.setState({ composerContent: "", initialComposerContent: "" });
         }
     };