WordPress.org

Make WordPress Core

Opened 17 months ago

Last modified 3 weeks 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 (12)

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


17 months ago

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


17 months ago

#3 @janpaulkleijn
15 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
14 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
14 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
14 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

#8 @eherman24
9 months ago

Patch attached to #47510

Last edited 3 weeks ago by SergeyBiryukov (previous) (diff)

#9 @madhazelnut
3 weeks ago

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

This ticket was mentioned in Slack in #core by madhazelnut. View the logs.


3 weeks ago

#11 @peterwilsoncc
3 weeks ago

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.

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


3 weeks ago

Note: See TracTickets for help on using tickets.