Twenty Nineteen: function matches() does not exist

[janpaulkleijn]

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

[janpaulkleijn]

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') ) {
...

[swissspidy]

This is the polyfill you are referring too?

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

[janpaulkleijn]

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?

[mukesh27]

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

Patch.

[rehanali]

Added patch

[poena]

Both patches solve the JavaScript error for me, and the menus still work well.

Tested on windows 10:
Firefox; version 112.0.1
Chrome: Version 112.0.5615.121
Edge: Version 112.0.1722.48
Opera: version 97.0.4719.63
MacOS:
Firefox: version 112.0.1
Chrome: Version 112.0.5615.12
Safari 16.4
Android phone:
Firefox 112.0,
Chrome 112.0.5615.100,
Edge

Related: This issue, plus one other, is also reported at https://core.trac.wordpress.org/ticket/45903

[audrasjb]

I can confirm the patch solves the issue.
Self assigning for commit.

I'll add the props from the other ticket as well.

[audrasjb]

In 55970:

Twenty Nineteen: Prevent a console error related to the main navigation on Firefox.

This changeset improves a JS conditional statement to fix a console error thrown by Firefox on event.target.matches.

Props kjellr, laurelfulford, audrasjb, dimijazz, ianbelanger, pbiron, poena, McAlyster, janpaulkleijn, swissspidy, mukesh27, rehanali.
Fixes #46474.
See #45903 (fixes one of the two issues of this ticket).

[audrasjb]

In 55972:

Twenty Nineteen: Fix a JS coding standard issue found after [55970].

Follow-up to [55970].

See #46474.