Premium support for our pure JavaScript UI components


Post by palmer »

We're seeing an issue with the Angular Scheduler drag create and drag move on a touch device (such as a real iPad and Chrome in iPad simulation mode): it scrolls at the same time as the drag is occurring. Errors in the console when using Chrome: "[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive."

This issue is reproduceable with the Angular Basic demo with scheduler version 4.3.1. (The regular Basic demo works correctly on touch devices).

"@bryntum/scheduler-angular": "^4.3.1",
"@bryntum/schedulerpro": "4.3.1",
"@bryntum/schedulerpro-angular": "4.3.1",


Post by saki »

I could reproduce it in Chrome simulation of iPad but not on the real iPad.

Are there any specific steps to reproduce it on the real iPad?

Attachments
iPad-scroll.mov
(6.42 MiB) Downloaded 65 times

Post by palmer »

Thank you for investigating. In your iPad video, since your timeline is already at the beginning, dragging from left-to-right is not expected to scroll. Try advancing the timeline to the future and then drag to create a new event by swiping left-to-right again. Or, with the timeline at the beginning, dragging right-to-left to create a new event will also cause the issue (assuming your timeline is not completely visible). I've attached a video of Safari on a real iPad (iOS 14.8.1) demonstrating the issue; it is in portrait mode so that not all dates in the timeline are visible on the screen at once. The same issue occurs with the latest version of the Chrome app for iPad.

I was able to address the issue by modifying the Bryntum code (which obviously I would never use other than for debugging) in EventHelper.js and adding passive: false to the touchmove event handler:

  touchmove: {
    capture: true,
    passive: false,
    handler: ({ changedTouches }) => ...

Of course you may have a better solution. I look forward to your reply.

Attachments
Angular Basic demo scroll issue.mp4
(7.9 MiB) Downloaded 60 times

Post by saki »

The proper workaround would be to add

.b-dragcreating .b-grid-subgrid {
    touch-action:none ;
}

to styles.scss. I have created the ticket here https://github.com/bryntum/support/issues/3632 to include it in our css.


Post by palmer »

thank you!


Post by palmer »

saki wrote: Thu Oct 28, 2021 10:24 am

The proper workaround would be to add

.b-dragcreating .b-grid-subgrid {
    touch-action:none ;
}

to styles.scss. I have created the ticket here https://github.com/bryntum/support/issues/3632 to include it in our css.

Unfortunately, this doesn't fix the issue for me. It appears that the touch-action:none style doesn't take effect immediately on the iPad, so the touch scroll is still allowed if you begin dragging too soon. Testing seems to reveal it takes roughly 500-1000ms for the new style to apply.

I've also discovered a similar issue with row reordering on the iPad: if I touch and hold and then begin dragging within roughly 275-475ms then both the row reorder and the vertical scroll occur at the same time (bad). If I touch and drag in under 250ms then it just scrolls (good), and if I touch and don't begin dragging until after about 500ms then the reorder works great and no scroll occurs (good).

Can you offer other suggestions?


Post by Animal »

Probably you need to force a synchronous style recalculation as soon as the class is added.

Use DomHelper.getStyleValue to retrieve the touch-action style of the TimeAxisSubGridElement. That way it will be forced to recalculate the style based on the new state and the touch action should be "none".


Post by palmer »

Animal wrote: Wed Nov 10, 2021 1:51 pm

Probably you need to force a synchronous style recalculation as soon as the class is added.

Use DomHelper.getStyleValue to retrieve the touch-action style of the TimeAxisSubGridElement. That way it will be forced to recalculate the style based on the new state and the touch action should be "none".

Since the b-dragcreating and b-row-reordering classes are added programmatically by the Bryntum module, what is the best way for me to add the code you suggested?


Post by Animal »

Try an eventResizeStart listener on the eventDragCreate Feature.


Post Reply