WordPress.org

Make WordPress Core

Opened 9 months ago

Last modified 9 months ago

#46474 new defect (bug)

function matches() does not exist in the Twenty Nineteen theme

Reported by: janpaulkleijn Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.1
Component: Themes Keywords: needs-testing has-patch
Focuses: Cc:
PR Number:

Description

In the themefiles (in the /js dir) there is a file called 'touch-keyboard-navigation.js'. This file uses the function matches() on lines 167 and 172.

It appears there is an issue with the use of the function matches() in my browser (Mozilla Firefox 65.0.2 64bit). I get the notice in the console that the function matches() does not exist.

I solved this with the use of a polyfill that is published by Mozilla: https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill

Steps to reproduce: Use the twentynineteen theme in the aforementioned Mozilla Firefox browser and click on the page (anywhere).

Attachments (1)

46474.diff (721 bytes) - added by mukesh27 9 months ago.
Patch.

Download all attachments as: .zip

Change History (6)

#1 @janpaulkleijn
9 months ago

Steps (2) to reproduce update: To reproduce the issue, use the twentynineteen theme in the aforementioned Mozilla Firefox browser, go to the homepage and switch to another tab and then back to the twentynineteen theme.

The error thrown by Mozilla firefox:

TypeError: event.target.matches is not a function

More specs about the error thrown by Mozilla firefox:

toggleSubmenuDisplay https://test.mega-service.nl/wp-content/themes/biggee-theme/js/touch-keyboard-navigation.js?ver=1.1:277

The line of code involved (line 277):

...
if ( event.target.matches('.main-navigation > div > ul > li a') ) {
...

#2 @swissspidy
9 months ago

  • Keywords needs-patch needs-testing added; has-patch removed
  • Summary changed from function matches() does not exist in the Twenty Nineteen theme to Twenty Nineteen: Element.matches() does not exist

This is the polyfill you are referring too?

if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector ||
                              Element.prototype.webkitMatchesSelector;
}

#3 @janpaulkleijn
9 months ago

  • Keywords has-patch added; needs-patch needs-testing removed
  • Summary changed from Twenty Nineteen: Element.matches() does not exist to function matches() does not exist in the Twenty Nineteen theme

Forget the polyfill, I was wrong. I suppressed the issue by changing line 277 from:

...
if ( event.target.matches('.main-navigation > div > ul > li a') ) {
...

to:

...
if ( event.target != window.document && event.target.matches('.main-navigation > div > ul > li a') ) {
...

But perhaps you have a better solution?

#4 @mukesh27
9 months ago

  • Keywords needs-patch needs-testing added; has-patch removed

@janpaulkleijn, Firefox shows an error when we focus on current page menu item, Below your solution solve that issue for for me in Firefox.

if ( event.target != window.document && event.target.matches('.main-navigation > div > ul > li a') ) {

@mukesh27
9 months ago

Patch.

#5 @mukesh27
9 months ago

  • Keywords has-patch added; needs-patch removed
Note: See TracTickets for help on using tickets.