Rocket.chat: Drop to upload file overlay gets stuck on Firefox

[MaT1g3R]

Description:

The drop to upload file overlay gets stuck when dragging a file into then out of the window running the rocket.chat webui on Firefox.

Steps to reproduce:

1. Drag a file over a valid drop zone, don't drop it
2. Drag the same file to another application window (doesn't matter what the application is)
3. The overlay gets stuck until refresh

Expected behavior:

The overlay doesn't get stuck

Actual behavior:

The overlay gets stuck

Server Setup Information:

• Version of Rocket.Chat Server: 1.2.0-develop
• Operating System: Manjaro Linux
• Deployment Method: meteor npm start
• Number of Running Instances: 1
• NodeJS Version: 8.11.4
• MongoDB Version: 4.0.2
• Firefox version: 67.0.1

Additional context

I did some debugging, it seems like the problem is caused by the dragenter event was firing twice when first dragging a file into the window (and additionally sometimes when dragging over certain elements). The relevant code is here, and I found a stack overflow post explaining this in detail here: https://stackoverflow.com/questions/10253663/how-to-detect-the-dragleave-event-in-firefox-when-dragging-outside-the-window

[gstlouisgit]

I have the same problem in chrome using the APP. However a refresh removed it.

[MartinSchoeler]

I could not reproduce this using firefox 69.0.3 (64-bit) and Rocket.Chat 2.2.0-develop

@MaT1g3R @gstlouisgit Could you test this using version 2.0.0 or higher? Thanks!

[MartinSchoeler]

After some extensive testing, I could not reproduce this. Please reope this with updated details if you are still facing this issue. Thanks!

[frostbtn]

@MartinSchoeler

Server: 2.4.11
Windows App: 2.17.7

It's hard to reproduce intentionally, but the problem is quite severe when working from a notebook with a sensitive touchpad.

See the demo (it starts when I having three "Text" words and doing some small movements):

1. Select some text in the chat window. On the gif I've selected text in the input, however same effect achieved with text in the messages area.
2. Start dragging the selected text with left mouse button. Here's the catch. You should "drag" the text by distance smaller than drag detect radius (3-5 pixels?) and then release mouse button _before_ cursor has changed to "dragging" (arrow with a plus).
3. Now you stuck with "Drop to upload file" backdrop. Pressing Esc button, clicking, switching to another channel and back again won't close the backdrop. To get rid of the backdrop you whether reload the app (Ctrl+R) or... fight fire with fire. Select any word from the "Drop to upload file" and drag it somewhere (or start dragging and press Esc in the process).

Re 2: Should you be dragging the selected text by longer distance, you will get no problems. As in the demo when after getting rid of the backdrop I drag "Text" to the other side of the input with no issues.

I believe the same mechanics applies when dragging files around.

[KurtYilmaz]

This issue either needs reopened, or a new issue should be created referencing the Windows application. @frostbtn has posted reproducible steps. I have confirmed it to be reproducible across the Windows application, Chrome, and Firefox (so this doesn't seem like a platform issue).