eventClick event is triggered while touch scrolling on windows devices with touch screens

[Eugene]

On windows devices with touch screens when user touch scrolls on an event the eventClick handler is fired.

In the following code you try to cancel this event by calling e.preventDefault() but this event is not cancellable anymore and error occured:

[Intervention] Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

r.eventTouchClick

The code on subject from event-base.js

EventBase.prototype.eventTouchClick = function (e) {

var _this = this;

if (this.parent.uiStateValues.isTouchScroll || this.parent.uiStateValues.isTapHold || this.parent.uiStateValues.action) {

this.parent.uiStateValues.isTouchScroll = this.parent.uiStateValues.isTapHold = false;

return;

}

setTimeout(function () { return _this.isDoubleTapped = false; }, 250);

e.preventDefault(); // This line will fail

if (this.isDoubleTapped) {

this.eventDoubleClick(e);

}

else if (!this.isDoubleTapped) {

this.isDoubleTapped = true;

this.eventClick(e);

}

};

you need to track in touchmove event if scroll started and do nothing if yes in eventTouchClick. Similar to:

r.prototype.eventTouchStart = function (e) {

    this._touchMoved = false;

};

r.prototype.eventTouchMove = function (e) {

    this._touchMoved = true;

};

and then check it this way:

r.prototype.eventTouchEnd = function (e) {

    if (this._touchMoved) {

        // This was a scroll -> do nothing

        return;

    }

...

Best regards,

[Vijay Ravi]

Hi Eugene

We have checked and validated your reported query for your requirement. But could you please explain your use case scenario in a bit more detail? Additionally, we need some more information to complete our validation. Please provide the following details for further validation.

 

• A minimal reproducible sample or the full code snippet that reproduces the issue
• Step-by-step instructions to reproduce the issue
• A short video/screen recording demonstrating the issue

 

Providing these details will help us validate and troubleshoot the problem more effectively.

Regards,

Vijay

[Eugene]

Steps to reproduce:

1. Device: windows based with touchscreen, for example Lenovo ThinkPad X1 Tablet (Gen 2 or Gen 3)

Or you can use regular (no touchscreen) windows laptop/desktop but Force enable the touch instead of click. In google chrome open devtools -> Sensors -> Touch -> Force Enabled

2. Create scheduler with many events and add eventClick handler to the ScheduleComponent. Put some console.log in it

3. Start scrolling by touching the actual events on the scheduler

Actual result: eventClick event handler fires. Observe the console for error: [Intervention] Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Expected result: eventClick event handler does not fire. No errors in the console.

Hope this helps.

Eugene

[Vijayakumar Rajasekar]

Hi Eugene,

 

Thank you for sharing details of your issue.

 

We reviewed your query and attempted to reproduce the issue using a sample prepared based on your scenario. However, we were unable to replicate the issue as described.

 

Sample: https://stackblitz.com/edit/react-eom8b2uu?file=index.js

 

To assist you better, we kindly request you to reproduce your scenario in the sample we shared. Additionally, please provide your scheduler configuration if it differs from the sample we provided, and share the version of the Syncfusion package you are using.

 

We appreciate your patience and look forward to your response to help resolve this matter.

Regards,

Vijayakumar R

[Eugene]

Hi

In your example you cancel the event and preventDefault() . Remove these lines and you should see the problem. 

const onEventClick = (args) => {

console.log('Event click triggered');

args.cancel = true; // Remove this line

args.originalEvent.preventDefault(); // Remove this line

// args.navigation.enable = true;

};

[Vijayakumar Rajasekar]

Hi Eugene,

 

Thank you for reaching out to us. Based on the details you provided, we attempted to replicate your scenario by removing specific lines from the onEventClick method.

 

args.cancel = true;
args.originalEvent.preventDefault();

 

However, we were unable to reproduce the issue you reported. To assist you further, we have provided an updated sample link below, which has been modified based on the information you shared:

 

Sample link: https://stackblitz.com/edit/react-eom8b2uu-q7jyvuua?file=index.js

 

Could you please provide a video that demonstrates the issue? This would greatly help us in investigating the matter further.

 

Feel free to reach out if you have any additional questions or need further assistance.

Regards,

Vijayakumar R