Multi-[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event ++

[slashvortal]

Situation

On MacOS/Chrome
CandleStick: When the StockTools are enabled
Lot of noticeable non proper handled eventListners thrown in the console. mainly refers to touchstart event
[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

To reproduce

This can be easily noticeable in the console of any react-based demo of StockChart with enabled stock-toos module.

Here is a quick live demos:
https://codesandbox.io/s/10yv629397
https://www.highcharts.com/stock/demo/stock-tools-gui

Video:
https://i.imgur.com/Z80XISw.mp4

Tested on
MacOS (Mojave) Chrome (Version 75.0.3770.100) and other Mac machines and Chrome versions.

[pawelfus]

Thanks for reporting!

@sebastianbochan - could you take a look?

[sebastianbochan]

Internal note
In the stockTools we add events (click / touch) by default H.addEvent. In the function we should add support of {passive: true} for touch events.

• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

[slashvortal]

Is there any quick workaround till you add passive support?

[sebastianbochan]

Hi @slashvortal,
At this moment you can overwrite the H.addEvent function, but, what is important, it requires to be in correct place (before loading modules).

Demo:

• https://jsfiddle.net/BlackLabel/x3c7w2mv/

[slashvortal]

Thanks @sebastianbochan, I would wait for the fix so I can use it with highcharts-react wrapper.

[pjanaya]

Any plans to fix this yet? The workaround demo linked by @sebastianbochan still shows 21 event-related violations to me.

[pawelfus]

Hi @pjanaya

Unfortunately we haven't had time to prioritize this yet.

[pjanaya]

@pawelfus Ok, thanks. Maybe you should consider removing the "Has workaround" label? Since, at least for me, the workaround doesn't seem to be enough to eliminate the errors.

[pawelfus]

Internal note:
It's a general issue, not Highstock only. We need to verify if all warnings are correct, sometimes we do need preventDefault() and sometimes we can not promise that a developer won't call preventDefault() through one of the callbacks.

[dave-brown755]

Hi All, is there any update on this issue?

[sebastianbochan]

Hi @dave-brown755,
At this moment we are not working on this case, so we do not have new information about. Have you tried to use our workaround?

[dave-brown755]

Hi, I didn't try any workaround as there appeared to be a subsequent post asking for the workaround label to be removed. Are you able to outline the exact steps that need to be followed to implement the workaround to allow the error to be removed. This is significantly impacting browser performance for ourselves I don't want to move away from high charts but we will not be able to live with the amount of errors being generated. Hope you can help. Thanks Dave.

[sebastianbochan]

Thank you for the feedback. I added the inbox label which means that the ticket is prioritized.

[dave-brown755]

Hi, any update on the priority of the ticket?

[pawelfus]

Hi @dave-brown755 - this ticket is already prioritized.

[onur-celik]

I am waiting for this to be fixed too
https://piyasa.paratic.com/

[dave-brown755]

I could see the ticket had been prioritized but was asking what this means, what is the typical lead time for a ticket that has been given a priority?

[pawelfus]

That means ticket will be picked up once current assignments are finished. I expect this issue to be fixed in v8.0.1 or v8.0.2.

[raf18seb]

I don't see any warnings in the console anymore (newest Chrome 80). Tested on 3 machines (Mac and Windows 10). Can someone confirm whether the issue still occurs and provide the exact steps to reproduce it?

[beans9]

I'm using v8.0.2 but I still see this message. :(

[pawelfus]

Just a clarification note: v8.0.1 was released (and v8.0.2) and v8.0.3 will be released shortly because of other critical bugs. Not related to the releasing schedule I expected when I said that I expect issue to be fixed in v8.0.2.

@raf18seb tried to debug the issue a few days ago, but could't recreate this. Any more details (os + chrome version) or new live demo - highly appreciated.

[onur-celik]

I am glad to see this issue "in progress" :)

[sharmankita]

You have mentioned fixed here. When can these changes be applied in CDN versions.

[pawelfus]

Hi @sharmankita - issue still has in progress label. That means it's not fixed, we are still working on it.

[violetVo]

Hi, any update on this? Is there an ETA for the fix?

[pawelfus]

Hi @violetVo - no ETA, we are still working on this.

My personal estimate: within next two versions should be ready.

[richardeschloss]

What happens when the event is marked as "passive"?

elm.on("touchstart", function(ev) {
  // stuff
}, {
  passive: true // does this option help?
});

[pawelfus]

I'm not sure what do you mean @richardeschloss - could you elaborate? I will try to answer your questions one by one:

What happens when the event is marked as "passive"?

See description here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

passive: true // does this option help?

This won't work in IE and Safari on iOS.

[richardeschloss]

Pawel, it seems like Rafal has got this one fixed. I saw the PR which helps answer the question I had. thanks.

[onur-celik]

finally 🥰

[violetVo]

Hi,
Thanks for the fix! Is it available in version 8.2.2?

[pawelfus]

Hi @violetVo v8.2.2 was released ~2 weeks ago. Fix will be available in the next release.

[forgivegod]

@pawelfus do you have a timeframe for the next release? Just wondering.
Hope you and the team are safe (re: covid)!

[pawelfus]

Thank you @forgivegod, we are good 👍 I hope you are good too!

The next release should be ready within a few weeks

[onur-celik]

bug fixed?

[KacperMadej]

Fixed since v9.0.0.