fix: draft not clearing after sending message

Closes #4430.

The bug was introduced in #4144.
There we made `throttle` accept the `text` argument
instead of reading `this.state.text`, and `this.state.text`
would get set to `''` after the message has been sent,
but then we'd still invoke the throttled function,
with the text from the last `onChange` event.

Author: WofWca

CHANGELOG.md

@@ -25,6 +25,7 @@
 - update `@deltachat/message_parser_wasm` from `0.11.0` to `0.12.0` #4477
 
 ## Fixed
+- fix draft not getting cleared after sending the message #
 - fix chat "scrolls up" right after switching (rev 2) #4431
 - when deleting a message from gallery, update gallery items to remove the respective item #4457
 - accessibility: fix arrow-key navigation stopping working after ~10 key presses #4441

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

@@ -49,6 +49,11 @@ export default class ComposerMessageInput extends React.Component<
     this.insertStringAtCursorPosition =
       this.insertStringAtCursorPosition.bind(this)
 
+    // Remember that the draft might be updated from the outside
+    // of this component (with the `setText` method,
+    // e.g. when the draft gets cleared after sending a message).
+    // This can happen _after_ an `onChange` event but _before_
+    // the unrelying throttled function invokation.
     this.throttledSaveDraft = throttle((text, chatId) => {
       if (this.state.chatId === chatId) {
         this.props.updateDraftText(text.trim() === '' ? '' : text, chatId)
@@ -77,8 +82,16 @@ export default class ComposerMessageInput extends React.Component<
     return null
   }
 
+  /**
+   * Sets the text area value, and ensures that `updateDraftText`
+   * does not get invoked until the next change to the draft text.
+   *
+   * Useful for setting / clearing draft text afer loading it from core,
+   * e.g. after sending the message or opening a chat with a.
+   */
   setText(text: string | null) {
     this.setState({ text: text || '', loadingDraft: false })
+    this.throttledSaveDraft.cancel()
   }
 
   setComposerSize(size: number) {

packages/shared/util.ts

@@ -22,7 +22,7 @@ export function throttle<R, A extends any[]>(
   let inThrottle: boolean,
     timeout: ReturnType<typeof setTimeout>,
     lastTime: number
-  return (...args: A) => {
+  const ret = (...args: A) => {
     if (!inThrottle) {
       fn(...args)
       lastTime = performance.now()
@@ -38,4 +38,8 @@ export function throttle<R, A extends any[]>(
       )
     }
   }
+  ret.cancel = () => {
+    clearTimeout(timeout)
+  }
+  return ret
 }