8.1 HTML5 drag & drop not working on Windows 10 in some browsers

[OlliTietavainenVaadin]

Tested with 8.1.0rc1, 8.1.0 and 8.1.3 in Windows 10 Dragging works normally in Edge Dragging doesn't work in Chrome, Firefox or IE11 the "draggable" property isn't found in DOM in the cases where it doesn't work Reason is probably DragSourceExtensionConnector, where the extend method calls BrowserInfo.get().isTouchDevice() (have not verified) Sample project: drag-and-drop.zip

[wbadam]

This seems to happen only on Windows 10 (need to verify other versions), there is no such issue on any of the browsers on Mac.

[appreciated]

@OlliTietavainenVaadin Does

public class PrismaUI extends UI {
  @Override
  protected void init(VaadinRequest request) {
    setMobileHtml5DndEnabled(true);
    ...
  }
}

make any difference? For me it fixed it.

[wbadam]

@appreciated That is a good workaround if you don't mind enabling drag and drop on real touch devices such as smart phones.

[OlliTietavainenVaadin]

The mobileHtml5Dnd polyfill comes with some drawbacks, including a different license and disabling context clicks on mobile devices. So it's a workaround. Desktop browsers should work without it.

[appreciated]

BrowserInfo.java

Chrome Console > "ontouchstart" in window

Returns:

• false on Desktop Windows with Touchscreen
• true on Desktop Windows without Touchscreen

I guess that is an unexpected behaviour

[BrianSiimAndersenEG]

I agree with Olli, that desktop browsers should work without setting MobileHtml5Dnd. We experience the same problem on some Windows 10 machines, where it works only in Edge. Could you mark this as a bug please?

[StephaneOCS]

Vaadin framework 8.1.7. Linux Ubuntu 16.04 Chrome 63

Drag & Drop not working on Latptop with Touchscreen (like XPS 15)

Drag & drog don't work on this cumputer without "setMobileHtml5DndEnabled(true);"

With setMobileHtml5DndEnabled(true) , on a Grid, we can drag only the first element. I can reproduce the problem on "https://demo.vaadin.com/sampler/#ui/drag-drop/grid-reorder-rows-html5".

I must disable touch event "chrome://flags/ -> Touch Events API = disable" to be able to use the drag&drop.

On firefox, the drag&drop work with a graphical bug : There is a big shift between the mouse and the selected component.

[pleku]

We are using the following Polyfill for the touch support: https://github.com/timruffles/ios-html5-drag-drop-shim

Unfortunately, we cannot do anything about the chrome://flags:

Chrome: Chrome supports touch devices/events. When run on a desktop touch device like MS Surface it turns on touch events which also disables native drag-and-drop support. Touch events can also be set by a user in chrome://flags to auto, on, off. There is also a flag for enabling drag-and-drop through touch interaction but only for Windows and the option is off by default. The polyfill still works if this setting is active. We cannot detect if this flag is set so we just stick to applying the polyfill when Chrome is detected with touch events enabled. Firefox: Touch events can be activated by a user in about:config to 0 (off), 1 (on), 2(auto). As of today (FF39.0) touch behavior is off. When touch events are active drag-and-drop interaction will still work, so no need to polyfill. My only advice would be to show a notification for the users asking them to change the flag to get the feature there.

The thing with "2-1 Windows laptops" is that they need the setMobileHtml5DndEnabled(true); in order to work with touch. You should be, in theory at least, able to add logic to detect when there might be a such a laptop in use and then just enable the flag only for those. Unfortunately I don't have an example on this nor do we have detecting that as a feature.

Since the UX for mobile DnD is not the best, the flag is not enabled by default in the framework. Alas, it should still work without touch support, instead of just working if the touch part is enabled -> thus I'm marking this as a bug.

On firefox, the drag&drop work with a graphical bug : There is a big shift between the mouse and the selected component

@StephaneOCS Please create a separate issue on this with the code and steps to reproduce.

[stale[bot]]

Hello there!

It looks like this issue hasn't progressed lately. There are so many issues that we just can't deal them all within a reasonable timeframe.

There are a couple of things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are dozens of duplicates in our issue tracker, so it is possible that the issue is already tackled. If it appears to be fixed, close the issue, otherwise report to the issue that it is still valid.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• Try fixing the issue yourself and create a pull request that contains the test case and/or a fix for it. Handling the pull requests is the top priority for the core team.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!

[BrianSiimAndersenEG]

This issue is still valid.

[KatriHaapalinna]

With setMobileHtml5DndEnabled(true) , on a Grid, we can drag only the first element.

Can reproduce still. This makes the Grid DnD feature really unusable on (some) Win10 computers.

[sirbris]

Yes, still an issue with current Vaadin Version and Windows 10 (IE & Firefox)!

[OlliTietavainenVaadin]

After testing the original test project now, it looks like it is working correctly on my laptop, which is the same one that displayed the buggy behavior earlier. This is even without touching the Vaadin version or the code of the project. It leads me to assume that some Windows (or browser) update in the meanwhile has altered some behavior and at least on my (non-touch) Windows 10 laptop everything works without a problem.

The original issue should still be tested with a touch-screen Windows 10 device.

The Grid drag & drop isue with mobile HTML5 enabled should be split off to a separate ticket.

[ZheSun88]

Hi @sirbris , Which issue do you refer to, as, it looks, there are two separate issues in this ticket. The original issue with DnD has pasted the test, according to Olli's comments, and we have created another ticket about the grid DnD issue. #11219

Could you let me know more info about your issue? is your device using touch or non-touch screen, btw?

[ZheSun88]

Tested with a touchscreen device with Win 10. The issue can be reproduced. via checking the DOM in IE/chrome: the draggable element are missing the draggable="true" attribute and v-label-dragsource v-draggable from the class attribute.

in Edge, the DOM structure looks like this, which should be correct behavior:

<div class="v-label v-label-dragsource v-draggable v-widget v-label-undef-w" draggable="true"></div>

[sirbris]

@ZheSun88 there also seems to be a problem with Win10 on non touch devices. We could not reproduce ourselves but three customers did have that issue.

[stale[bot]]

Hello there!

We are sorry that this issue hasn't progressed lately. We are prioritizing issues by severity and the number of customers we expect are experiencing this and haven't gotten around to fix this issue yet.

There are a couple of things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are dozens of duplicates in our issue tracker, so it is possible that the issue is already tackled. If it appears to be fixed, close the issue, otherwise report to the issue that it is still valid.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• Try fixing the issue yourself and create a pull request that contains the test case and/or a fix for it. Handling the pull requests is the top priority for the core team.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!

[mil3stone]

The explanation by @ZheSun88 is still valid.

Tested with a touchscreen device with Win 10. The issue can be reproduced. via checking the DOM in IE/chrome: the draggable element are missing the draggable="true" attribute and v-label-dragsource v-draggable from the class attribute.

in Edge, the DOM structure looks like this, which should be correct behavior:

<div class="v-label v-label-dragsource v-draggable v-widget v-label-undef-w" draggable="true"></div>

[stale[bot]]

Hello there!

We are sorry that this issue hasn't progressed lately. We are prioritizing issues by severity and the number of customers we expect are experiencing this and haven't gotten around to fix this issue yet.

There are a couple of things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are dozens of duplicates in our issue tracker, so it is possible that the issue is already tackled. If it appears to be fixed, close the issue, otherwise report to the issue that it is still valid.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• Try fixing the issue yourself and create a pull request that contains the test case and/or a fix for it. Handling the pull requests is the top priority for the core team.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!

[stale[bot]]

Hello there!

We are sorry that this issue hasn't progressed lately. We are prioritizing issues by severity and the number of customers we expect are experiencing this and haven't gotten around to fix this issue yet.

There are a couple of things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are dozens of duplicates in our issue tracker, so it is possible that the issue is already tackled. If it appears to be fixed, close the issue, otherwise report to the issue that it is still valid.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• Try fixing the issue yourself and create a pull request that contains the test case and/or a fix for it. Handling the pull requests is the top priority for the core team.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!