From 947990b7f6d78ace003e33bc8a584e2b581a3681 Mon Sep 17 00:00:00 2001
From: Martin Brennan <martin@discourse.org>
Date: Tue, 2 Jul 2024 09:37:10 +1000
Subject: [PATCH] FIX: Small delay when auto-adding list item in composer
 (#27661)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Followup 30fdd7738ec942126bb055c9a6a8d69ddffba2da,

The issue with keyup is that it happens too late. maybeContinueList
itself runs in about 1 or 2 ms. But we show the linebreak in the
textarea on keydown and we handle it in keyup, which causes the “lag”.

The fix here is “hacking” itsatrap and textarea behavior to allow us to handle
it right away after the linebreak is inserted.

Full credit to Joffrey Jaffeux for this fix, I am making him
"co-author" below.

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
---
 .../javascripts/discourse/app/components/d-editor.js |  7 ++++++-
 .../tests/integration/components/d-editor-test.js    | 12 ++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/d-editor.js b/app/assets/javascripts/discourse/app/components/d-editor.js
index 75bcda31049..ce1b2dcbdf6 100644
--- a/app/assets/javascripts/discourse/app/components/d-editor.js
+++ b/app/assets/javascripts/discourse/app/components/d-editor.js
@@ -326,7 +326,12 @@ export default Component.extend(TextareaTextManipulation, {
     this._itsatrap.bind(`${PLATFORM_KEY_MODIFIER}+shift+.`, () =>
       this.send("insertCurrentTime")
     );
-    this._itsatrap.bind("enter", () => this.maybeContinueList(), "keyup");
+    this._itsatrap.bind("enter", () => {
+      // Check the textarea value after a brief delay to ensure the input event has updated the value
+      setTimeout(() => {
+        this.maybeContinueList();
+      }, 0);
+    });
 
     // disable clicking on links in the preview
     this.element
diff --git a/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js b/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js
index 2c9a282e7c7..02937dbb7c9 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js
@@ -989,7 +989,7 @@ third line`
       const initialValue = "* first item in list\n";
       this.set("value", initialValue);
       setCaretPosition(textarea, initialValue.length);
-      await triggerKeyEvent(textarea, "keyup", "Enter");
+      await triggerKeyEvent(textarea, "keydown", "Enter");
       assert.strictEqual(this.value, initialValue + "* ");
     }
   );
@@ -1000,7 +1000,7 @@ third line`
       const initialValue = "- first item in list\n";
       this.set("value", initialValue);
       setCaretPosition(textarea, initialValue.length);
-      await triggerKeyEvent(textarea, "keyup", "Enter");
+      await triggerKeyEvent(textarea, "keydown", "Enter");
       assert.strictEqual(this.value, initialValue + "- ");
     }
   );
@@ -1011,7 +1011,7 @@ third line`
       const initialValue = "1. first item in list\n";
       this.set("value", initialValue);
       setCaretPosition(textarea, initialValue.length);
-      await triggerKeyEvent(textarea, "keyup", "Enter");
+      await triggerKeyEvent(textarea, "keydown", "Enter");
       assert.strictEqual(this.value, initialValue + "2. ");
     }
   );
@@ -1022,7 +1022,7 @@ third line`
       const initialValue = "* first item in list\n\n* second item in list";
       this.set("value", initialValue);
       setCaretPosition(textarea, 21);
-      await triggerKeyEvent(textarea, "keyup", "Enter");
+      await triggerKeyEvent(textarea, "keydown", "Enter");
       assert.strictEqual(
         this.value,
         "* first item in list\n* \n* second item in list"
@@ -1036,7 +1036,7 @@ third line`
       const initialValue = "1. first item in list\n\n2. second item in list";
       this.set("value", initialValue);
       setCaretPosition(textarea, 22);
-      await triggerKeyEvent(textarea, "keyup", "Enter");
+      await triggerKeyEvent(textarea, "keydown", "Enter");
       assert.strictEqual(
         this.value,
         "1. first item in list\n2. \n3. second item in list"
@@ -1050,7 +1050,7 @@ third line`
       const initialValue = "* first item in list with empty line\n* \n";
       this.set("value", initialValue);
       setCaretPosition(textarea, initialValue.length);
-      await triggerKeyEvent(textarea, "keyup", "Enter");
+      await triggerKeyEvent(textarea, "keydown", "Enter");
       assert.strictEqual(this.value, "* first item in list with empty line\n");
     }
   );