Make WordPress Core

Opened 5 years ago

Closed 6 months ago

#46948 closed defect (bug) (worksforme)

Twenty Nineteen - JS error on mobile menu when no visible items

Reported by: anevins's profile anevins Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: reporter-feedback close
Focuses: Cc:

Description

Looks like there's an issue with the JS that populates the 'more' (...) menu on mobile. If there are no visible menu links inside the main menu on mobile and all of them are inside the 'more' menu, then the JS will break. I do not think this is an issue on a Child Theme.

Line 128 priority-menu.js:

prependElement( hiddenList, ! visibleList.lastChild || null === visibleList.lastChild ? visibleList.previousElementSibling : visibleList.lastChild );

Regarding .lastChild.

The visibleList element:

// Adds the necessary UI to operate the menu.
var visibleList  = container.parentNode.querySelector('.main-menu[id]');

If no items are inside the visible list (and all items are inside the more menu) then visibleList will indeed return as a Node, however lastChild will return null.

This means the value will not be catched properly by this inline condition:

visibleList.previousElementSibling : visibleList.lastChild 

And null will be passed to the second argument of the prependElement function when it is not a node - and cause a JS error.

_https://wordpress.org/support/topic/javascript-error-on-child-theme/#post-11433882_

Change History (7)

#1 @desrosj
5 years ago

  • Keywords reporter-feedback added

@anevins can you provide some more steps to recreate this? The error noted on the support ticket is

Uncaught TypeError: Failed to execute ‘insertBefore’ on ‘Node’: parameter 1 is not of type ‘Node’. at prependElement (priority-menu.js:47)

I am only able to trigger the following similar but different error when the screen size is less than about 100 pixels wide: TypeError: Argument 1 of Node.insertBefore is not an object.

#2 @anevins
5 years ago

If you visit the URL provided by the second participant in that thread, you'll see on their site they have zero items visible in the menu at 767px or below.

#3 @markbanf
5 years ago

Has there been any progress on this bug?

To see it in action simply resize the following website to less than 768px and check the JS errors in priority-menu.js.

https://gardener.markbanf.co.uk/

#4 @anevins
5 years ago

@markbanf I think it's not being considered as a wide use case and not prioritised to work on.

#5 @markbanf
5 years ago

Ok, thanks Andrew. Looks like I'll have to create my own navigation and give up on the built in menus.

Regardless, your help is much appreciated.

Mark

#6 @karmatosed
6 months ago

  • Keywords close added

Hi, I just checked this and like @desrosj, I am unable to trigger the error using the original steps. As a result I would like to see the following happen:

  • I have added the keyword 'close'. This doesn't close but it does flag it for closing.
  • If others are able to still replicate can you please share the steps you are using incase that is why others are unable to reproduce.

Thanks everyone for your collaboration on this so far.

#7 @karmatosed
6 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

I am going to close this for now, thank you everyone.

Note: See TracTickets for help on using tickets.