From 24edc04140bb96dd1caa45fd4c603bb8c520f80a Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 8 Nov 2021 13:41:05 +1100 Subject: [PATCH] Fix submenus not opening on click (#36290) --- packages/block-library/src/navigation/view.js | 65 ++++++++++--------- 1 file changed, 33 insertions(+), 32 deletions(-) diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js index ff5957d8dd66b7..bcb93e02baa3ab 100644 --- a/packages/block-library/src/navigation/view.js +++ b/packages/block-library/src/navigation/view.js @@ -56,42 +56,43 @@ function toggleSubmenuOnClick( event ) { } } -const submenuButtons = document.querySelectorAll( - '.wp-block-navigation-submenu__toggle' -); - -submenuButtons.forEach( function ( button ) { - button.addEventListener( 'click', toggleSubmenuOnClick ); -} ); - -// Close on click outside. -document.addEventListener( 'click', function ( event ) { - const navigationBlocks = document.querySelectorAll( - '.wp-block-navigation' - ); - navigationBlocks.forEach( function ( block ) { - if ( ! block.contains( event.target ) ) { - closeSubmenus( block ); - } - } ); -} ); -// Close on focus outside. -document.addEventListener( 'keyup', function ( event ) { - const submenuBlocks = document.querySelectorAll( - '.wp-block-navigation-item.has-child' - ); - submenuBlocks.forEach( function ( block ) { - if ( ! block.contains( event.target ) ) { - closeSubmenus( block ); - } - } ); -} ); - // Necessary for some themes such as TT1 Blocks, where // scripts could be loaded before the body. -window.onload = () => +window.onload = () => { MicroModal.init( { onShow: navigationToggleModal, onClose: navigationToggleModal, openClass: 'is-menu-open', } ); + + const submenuButtons = document.querySelectorAll( + '.wp-block-navigation-submenu__toggle' + ); + + submenuButtons.forEach( function ( button ) { + button.addEventListener( 'click', toggleSubmenuOnClick ); + } ); + + // Close on click outside. + document.addEventListener( 'click', function ( event ) { + const navigationBlocks = document.querySelectorAll( + '.wp-block-navigation' + ); + navigationBlocks.forEach( function ( block ) { + if ( ! block.contains( event.target ) ) { + closeSubmenus( block ); + } + } ); + } ); + // Close on focus outside. + document.addEventListener( 'keyup', function ( event ) { + const submenuBlocks = document.querySelectorAll( + '.wp-block-navigation-item.has-child' + ); + submenuBlocks.forEach( function ( block ) { + if ( ! block.contains( event.target ) ) { + closeSubmenus( block ); + } + } ); + } ); +};