WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 2 months ago

#46713 new defect (bug)

Comment reply link uses inconvenient eventlistener

Reported by: szandman Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.1
Component: Comments Keywords:
Focuses: Cc:

Description

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.

Change History (7)

This ticket was mentioned in Slack in #core-editor by peterwilsoncc. View the logs.


5 months ago

This ticket was mentioned in Slack in #core-js by peterwilsoncc. View the logs.


5 months ago

#3 @janpaulkleijn
3 months ago

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

#4 @Znuff
3 months ago

@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.

#5 @janpaulkleijn
3 months ago

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...

#7 @afercia
2 months ago

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

Note: See TracTickets for help on using tickets.