[text-field] Change event is not fired on a drag and drop interaction in Firefox

[SoylentBob]

Description

vaadin-text-field does not trigger the change event in the Firefox browser when a value is dragged and dropped into the field.

The behavior in Chrome is as I would have expected it. The difference in behavior can also be observed with the native input fields.

We could use a focusout event listener instead, but that seems like a workaround that every developer would have to keep in mind all the time, rather than an actual solution to the problem.

Live Demo

https://glitch.com/edit/#!/legend-rough-hour

Steps to Reproduce

1. Put a vaadin-text-field element in the page.
2. Register a change listener to the vaadin-text-field
3. Drag and Drop some value into it

Expected Results

vaadin-text-field should trigger the change event in Firefox.

Actual Results

vaadin-text-field does not trigger the change event in Firefox.

Browsers Affected

• Chrome (Chromium: 87.0.4280.66)
• Firefox (85.0.1)
• Safari (Not tested)
• iOS Safari (Not tested)
• Android Chrome (Not tested)

Version

• vaadin-text-field: v2.8.0

[tomivirkki]

Hi @SoylentBob

Tried this with FF 86 and I do get the "change" event:

[SoylentBob]

Hi @tomivirkki,

thank you for your quick response.

This is the behavior I can observe on my machine:

86.0 has not yet been published through the Ubuntu packages yet, but I will try to get it running on my computer today and check whether or not the issue is resolved in the newer version.

[web-padawan]

Just to clarify, could you please test it with the native <input> element e.g. using this demo?
Select input in inspector, and use $0.addEventListener('change', console.log). Then drag and drop some text.

I have tried that (also on MacOS) and the change is fired for the native <input> when focus leaves it.

In case if the change event is not fired on Linux, then it's probably a browser bug.

[tomivirkki]

The difference in behavior can also be observed with the native input fields.

There's some difference in how this works on Linux vs other OS. We can either wait for the browser to get fixed or try to work around the issue in vaadin-text-field (fire the event manually).

[SoylentBob]

I just upgraded to Firefox 86 and the issue seems to remain:

@web-padawan I updated my example code and added the native input to it and it behaves in the same way.

The bug was discovered by one of our users on a Windows machine, so the behavior should not be tied to Linux. I don't have a Windows machine at hand right now, but will try to get one of our users to provide additional feedback.

[SoylentBob]

So we did our best to pinpoint the exact version of Firefox that the bug did occur in. We tried these versions on a windows machine:

• 84.0
• 84.0.1
• 84.0.2
• 85.0
• 85.0.1
• 85.0.2
• 86.0

And we were unable to reproduce the issue in any of them.

Until a colleague realized, that our users have been dragging and dropping the value from a different window, e.g. their Thunderbird email client into the browser. As soon as we started doing that, we were able to reproduce the issue in all of the stated Firefox versions on Windows.

Vaadin Text Field:

native input:

[SoylentBob]

@tomivirkki @web-padawan

Please let me know, if you need any further information to trace down the problem.