File upload gets placed into empty stream or topic box

[alya]

Repro:

1. Open the compose box with an empty stream and/or topic.
2. Drag a file to the compose box.

Expected: File gets uploaded as normal.
Actual: [Uploading..] text gets placed into the stream box if it's empty, and into the topic box otherwise.

[zulipbot]

Hello @zulip/server-compose, @zulip/server-misc members, this issue was labeled with the "area: compose", "area: uploads" labels, so you may want to check it out!

[JoeyPriceless]

I'm having trouble reproducing this issue. The [Uploading..] text always seems to appear in the content box and not the stream/topic boxes even if they're empty. Am I missing something?

[alya]

Huh, and now this stopped happening for me. I'm very puzzled!

... And now it's happening again.

[alya]

[alya]

Hrm, I don't remember why I closed this issue earlier.

[timabbott]

I can reliably reproduce this issue in Chrome on Linux. It's a bit finicky; it works best if you have a split-screen window (so you don't need to alt-tab in order before initiating the drag, which likely affects the focus state, which is important for this reproducer) and open the compose box using the c keyboard shortcut while looking at "All messages". Then just drag an item into the compose area.

The code path doing the insertion is compose_ui.insert_syntax_and_focus being called from upload.js.

With this logging code added:

$ git diff
diff --git a/static/js/compose_ui.js b/static/js/compose_ui.js
index a5d7578499..3acf1c5f7d 100644
--- a/static/js/compose_ui.js
+++ b/static/js/compose_ui.js
@@ -60,14 +60,18 @@ export function smart_insert($textarea, syntax) {
         syntax += " ";
     }
 
+    console.log("Triggering focus", $textarea, $(":focus"));
     $textarea.trigger("focus");
+    console.log("Triggered focus", $textarea, $(":focus"));
 
     // We prefer to use insertText, which supports things like undo better
     // for rich-text editing features like inserting links.  But we fall
     // back to textarea.caret if the browser doesn't support insertText.
     if (!document.execCommand("insertText", false, syntax)) {
+        console.log("Fail inserted text", $(":focus"));
         $textarea.caret(syntax);
     }
+    console.log("Success inserted text",  $textarea, $(":focus"));
 
     autosize_textarea($textarea);
 }

I get this output:

What appears to be happening is that somehow the focus stays on the wrong element just before the insertText command executes; leading to the insertion happening in the wrong place.

The right fix likely involves just replacing insertText, which is deprecated anyway, completely. @amanagr I think you were able to use the text-field-edit library for this class of string replacement preserving Undo elsewhere in this file; want to try porting this to use that?

[timabbott]

Opened #23499 attempting that.