fix: Clear chat input after Enter key submit

app/javascript/chat/__tests__/compose.test.jsx

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { render, fireEvent } from '@testing-library/preact';
+import { render, fireEvent, createEvent } from '@testing-library/preact';
 import { axe } from 'jest-axe';
 import Compose from '../compose';
 
@@ -30,14 +30,15 @@ const handleKeyDownFake = (e) => {
   }
 };
 
-const getCompose = (tf) => {
+const getCompose = (tf, props = {}) => {
   // true -> not empty, false -> empty
   if (tf) {
     return (
       <Compose
         handleSubmitOnClick={handleSubmitFake}
         handleKeyDown={handleKeyDownFake}
         activeChannelId={12345}
+        {...props}
       />
     );
   }
@@ -46,6 +47,7 @@ const getCompose = (tf) => {
       handleSubmitOnClick={handleSubmitEmpty}
       handleKeyDown={handleKeyDownFake}
       activeChannelId={12345}
+      {...props}
     />
   );
 };
@@ -68,7 +70,7 @@ describe('<Compose />', () => {
     it('should click submit', () => {
       const { getByText } = render(getCompose(false));
       const button = getByText(/Send/i);
-      
+
       button.click();
       expect(submitNoMessage).toEqual(true);
       expect(submitWithMessage).toEqual(false);
@@ -135,4 +137,85 @@ describe('<Compose />', () => {
       expect(textfieldIsEmpty).toEqual(true);
     });
   });
+
+  // Check for the actual input value after pressing enter
+  it('should press enter and check for empty input', () => {
+    const compose = getCompose(true);
+    const { getByTestId, rerender } = render(compose);
+
+    const input = getByTestId('messageform');
+
+    fireEvent(input, createEvent('input', input, { target: { value: 'T' } }));
+
+    expect(input.value).toBe('T');
+
+    fireEvent.keyDown(input, { keyCode: 13 });
+
+    rerender(compose);
+
+    expect(input.value).toBe('');
+  });
+
+  // Check for the actual input value after clicking send
+  it('should click send and check for empty input', () => {
+    const compose = getCompose(true);
+    const { getByTestId, getByText, rerender } = render(compose);
+
+    const input = getByTestId('messageform');
+    const sendButton = getByText(/send/i);
+
+    fireEvent(input, createEvent('input', input, { target: { value: 'T' } }));
+
+    expect(input.value).toBe('T');
+
+    sendButton.click();
+
+    rerender(compose);
+
+    expect(input.value).toBe('');
+  });
+
+  // Check for the actual input value after saving an edit
+  it('should click send edit and check for empty input', () => {
+    const compose = getCompose(true, {
+      markdownEdited: false,
+      startEditing: true,
+      editMessageMarkdown: 'Test',
+      handleSubmitOnClickEdit: () => null,
+    });
+    const { getByTestId, getByText, rerender } = render(compose);
+
+    const input = getByTestId('messageform');
+    const saveButton = getByText(/save/i);
+
+    expect(input.value).toBe('Test');
+
+    saveButton.click();
+
+    rerender(compose);
+
+    expect(input.value).toBe('');
+  });
+
+  // Check for the actual input value after canceling an edit
+  it('should click close edit and check for empty input', () => {
+    const compose = getCompose(true, {
+      markdownEdited: false,
+      startEditing: true,
+      editMessageMarkdown: 'Test',
+      handleEditMessageClose: () => null,
+    });
+    const { getByTestId, getByText, rerender } = render(compose);
+
+    const input = getByTestId('messageform');
+    const closeButton = getByText(/close/i);
+
+    expect(input.value).toBe('Test');
+
+    closeButton.click();
+
+    rerender(compose);
+
+    expect(input.value).toBe('');
+  });
 });

app/javascript/chat/chat.jsx

@@ -602,7 +602,6 @@ export default class Chat extends Component {
       } else if (!messageIsEmpty && !shiftPressed) {
         e.preventDefault();
         this.handleMessageSubmit(e.target.value);
-        e.target.value = '';
       }
     }
     if (e.target.value.includes('@')) {
@@ -679,7 +678,6 @@ export default class Chat extends Component {
       } else if (!messageIsEmpty && !shiftPressed) {
         e.preventDefault();
         this.handleMessageSubmitEdit(e.target.value);
-        e.target.value = '';
       }
     }
   };
@@ -845,7 +843,6 @@ export default class Chat extends Component {
     const message = document.getElementById('messageform').value;
     if (message.length > 0) {
       this.handleMessageSubmit(message);
-      document.getElementById('messageform').value = '';
     }
   };
 
@@ -854,7 +851,6 @@ export default class Chat extends Component {
     const message = document.getElementById('messageform').value;
     if (message.length > 0) {
       this.handleMessageSubmitEdit(message);
-      document.getElementById('messageform').value = '';
     }
   };
 
@@ -1747,13 +1743,11 @@ export default class Chat extends Component {
   };
 
   handleEditMessageClose = () => {
-    const textarea = document.getElementById('messageform');
     this.setState({
       startEditing: false,
       markdownEdited: false,
       activeEditMessage: { message: '', markdown: '' },
     });
-    textarea.value = '';
   };
 
   renderDeleteModal = () => {