Comment reply link uses inconvenient eventlistener

[szandman]

When comment-reply.js was rewritten recently the behavior of the reply-button changed. It now seems to use 'touchstart' as eventlistener which makes it really "touchy" to use on mobile. It's almost impossible to use scroll now since you always trigger the touchstart event which opens the reply-box.

[janpaulkleijn]

Hi there,
During my efforts to make my website more accessible I was also pointed out by Google LightHouse that the adding of the 'touchstart' event listener in this file lacked the option passive.

This can be corrected by altering the file: wp-includes/js/comment-reply.min.js

First the availability of support for the option parameter in the User Agent must be checked.
​https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support

Check option support (minified)

var supportsPassive=false;try{var opts=Object.defineProperty({},'passive',{get:function(){supportsPassive=true;}});window.addEventListener("testPassive", null, opts);window.removeEventListener("testPassive", null, opts);} catch (e) {}

So you insert this code in the comment-reply.min.js file, right above the current code.

Then the option must be added to the call for the 'touchstart' event listener in the code itself. Where you see:

addEventListener("touchstart",f)

you should replace it with:

addEventListener("touchstart",f,supportsPassive?{passive:true}:false)

At the moment this event listener is found only twice in the beginning part of the code.

This will solve your issue.

A good and thorough explanation of passive event listeners:
​https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

[Znuff]

@janpaulkleijn thanks for the suggested fix, our users were complaining about hitting the reply button while scrolling continuously, we couldn't figure out what it was initially, as it's not exactly obvious at first.

[janpaulkleijn]

No problem. It's true that these days an incredible lot happens on a page, which makes looking for the culprit not always that easy. It's kind of a detective thing...

[SergeyBiryukov]

Related: #47510

[afercia]

Introduced in [42360] / #31590. Details on the Chrome / Lighthouse warning mentioned in #47510: ​https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners

[eherman24]

Patch attached to #47510

[madhazelnut]

Do the passive listeners "fixes" actually address the core of this ticket? WordPress is still (5.4.2) displaying the same issue on mobile.

[peterwilsoncc]

As I've mentioned in #47510, passive listeners are incompatible with the event handler as it calls Event.preventDefault() -- please continue any discussion on moving to a passive listener on the existing ticket.

This ticket should focus on the reported issue of whether thouchstart is the appropriate place to add the event listener.

Brought to light by recent Lighthouse updates, we should make the touchStart events in our comment reply script passive.

See ​https://web.dev/uses-passive-event-listeners/ for background and explanation.

This might affect (and partially fix) https://core.trac.wordpress.org/ticket/46713

Trac ticket: https://core.trac.wordpress.org/ticket/55988

[Znuff]

I love how this is 4 years old and... nothing happened yet.

[pbearne]

Replying to Znuff:

I love how this is 4 years old and... nothing happened yet.

It looks like this is mostly fixed in https://core.trac.wordpress.org/ticket/55988

I am close this I don't think any more work will done on this ticket