New Vaadin 8 drag and drop bug breaks Cuba 7.2 app

Support
#1

Hi All.
I have been developing an application for a few years in Cuba 7.2.

I was this week close to deploying a new screen in the Cuba application that crucially relies on drag and drop of Image components, using the vaadin DragSourceExtension and DropTargetExtension classes, when it suddenly no longer worked within Firefox, since the new release of Firefox version 109 this week. I also confirmed the same problem in the current release of Chrome.

The problem is when an Image component is dragged to a target, the DropTarget dropListener event is no longer being called.

However, I have found if the image component has no SRC value (i.e. an ‘empty’ image), the drop event does fire!

The problem does not happen in Firefox 108.0.2

In an effort to try and pinpoint the issue, I have written a Vaadin 8 only test application (no cuba framework) that demonstrates the problem. Will attach zip.

Simple pure javascript testing in the browser shows the browser is generating the drop event, and monitoring of the Vaadin app within the browser debugger shows that the browser native drop event is raised, but it is not forwarded back to the server by vaadin.

I have also written an equivalent program in vaadin 14 and in vaadin 23, and neither of these suffer from this issue - only Vaadin 8.

So I would conclude that with the recent releases of Firefox and Chrome, an incompatibility bug has arisen within Vaadin 8.1.14.

Of course, my problem is Vaadin 8 is end of life, yet Cuba 7.2 is still supported. Does Cuba have any policy in this case to try and find a solution to a breaking issue that arises in the underlying Vaadin?

I would be grateful for any suggestions, thank you.

#2

vaadin8-dragdropbug.zip (63.9 KB)

#4

Hello!

Thank you for reporting the problem and for the demo project!

I tested a little bit and found out that with ExternalResource or in CUBA API UrlResource drop event is fired.
In the client-side the DropTargetExtensionConnector has a check that does not enable dropping if event contains Files type. It seems that browsers starts to add this type when dragging image with ThemeResource and others.

I’ve created an issue Vaadin drop event is not fired when image with theme source is dropped to a target component · Issue #3292 · cuba-platform/cuba · GitHub

#6

Thank you for investigating.

Unfortunately, in my original Vaadin 8 test program, the image drag still fails to drop even with an ExternalResource and URL.

Do you have an example of ExternalResource/URL working in Vaadin 8 or Cuba 7.2 ?

#7

I’ve tested in recent Chrome version (109.0.5414.120), ExternalResource works. However in FireFox both resources do not work.

The reworked Vaadin 8 demo project: vaadin8-dnd.zip (66.6 KB)

#8

Thank you. The issue of dataTransfer.files being populated seems to be a Firefox bug, as reading of the HTML5 spec would seem to suggest files should only be populated for filesystem object drops (although it’s somewhat ambiguous).

I have created an example jsfiddle and submitted a bug report to Mozilla:

The example further shows that the behavior is even different for two images on the page, the only real difference being one is a JPG and the other is SVG.

As regards trying to workaround this problem, I am looking to change my application from using StreamResources to URL. At present, I am creating a StreamResource.StreamSource that returns thumbnail images, and using this for the Image component source, so the generation of the image src URL is internal to Vaadin.

I would be ok with breaking out the generating of the images to a separate service based on the filename, so a URL resource could be passed to the draggable images.

Is there an example of generating a route within the app to supply image assets dynamically? It would be something like the the REST file download URL but using the Vaadin session cookies instad of OAuth.

The documentation seems to suggest only routes to Screen classes are supported.

#9

For static images (themes, VAADIN folder) you can check the following topic: BrowserFrame insert image to html file.

Unfortunately, there is no example of getting URL for images that are stored in FileStorage or in DB. I think, you can check how working ExportDisplay bean and CubaFileDownloader. It sets to the connector the resource with an id and in the client-side gets the URL of the resource by the same id.

#10

Thank you for the suggestions.

To work around this issue, I have created a custom widget based on FocusWidget, with a property to allow the css background-image for the element to be set to a Resource.

This is working with stream resource, and is allowing the element to be dragged without the drop event reporting a pseudo File.