Save draft on chat change

- resolves 3733

CHANGELOG.md

@@ -53,6 +53,7 @@
 - cancel old message highlight animations when a new message is highlighted #4203
 - fix: packaging: include architecture in filename for all appimages #4202
 - fix: make open external link scheme case insensive #4201
+- fix: save draft when you switch to another chat #3733
 
 <a id="1_46_8"></a>
 

packages/frontend/src/components/composer/ComposerMessageInput.tsx

@@ -29,7 +29,7 @@ export default class ComposerMessageInput extends React.Component<
   composerSize: number
   setCursorPosition: number | false
   textareaRef: React.RefObject<HTMLTextAreaElement>
-  saveDraft: () => void
+  saveDraft: ReturnType<typeof debounce<(text: string, chatId: number) => void>>
   constructor(props: ComposerMessageInputProps) {
     super(props)
     this.state = {
@@ -46,10 +46,9 @@ export default class ComposerMessageInput extends React.Component<
     this.insertStringAtCursorPosition =
       this.insertStringAtCursorPosition.bind(this)
 
-    this.saveDraft = debounce(() => {
-      const { text, chatId } = this.state
+    this.saveDraft = debounce((text: string, chatId: number) => {
       this.props.updateDraftText(text.trim() === '' ? '' : text, chatId)
-    }, 1000)
+    }, 200)
 
     this.textareaRef = React.createRef()
     this.focus = this.focus.bind(this)
@@ -124,17 +123,14 @@ export default class ComposerMessageInput extends React.Component<
       this.resizeTextareaAndComposer()
       if (prevState.text !== this.state.text) {
         if (!this.state.loadingDraft) {
-          this.saveDraft()
+          this.saveDraft(this.state.text, prevState.chatId)
         }
       }
     }
   }
 
   onChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
     this.setState({ text: e.target.value /*error: false*/ })
-    if (!this.state.loadingDraft) {
-      this.saveDraft()
-    }
   }
 
   keyEventToAction(e: React.KeyboardEvent<HTMLTextAreaElement>) {