Navigation mobile overlay closes unintentionally after clicking on submenu button

[fabiankaegy]

When the navigation block is set to open submenus via the click event instead of hover, the mobile submenu collapses unintentionally after the user clicks on the submenu button once. See the attached video.

CleanShot.2024-04-02.at.14.59.49.mp4

[fabiankaegy]

CC: @WordPress/interactivity-api

[annezazu]

@fabiankaegy is this happening in 6.5? If so, we should at this as a point release bug potentially.

[fabiankaegy]

@annezazu it is but I have not been able to test whether it isn't happening in 6.4.3.

Will do that tomorrow.

But yeah I do think this would be a nice point update

[fabiankaegy]

Okay I was able to test it on 6.4.3 now and the issue does not happen there. So it is 6.5 specify. Because of that I do think that we should add this to a patch release

[fabiankaegy]

I've been able to use the debugger to figure out that the issue is happening here:

gutenberg/packages/block-library/src/navigation/view.js

Lines 139 to 156 in dbd4cec

	handleMenuFocusout( event ) {
	const { modal } = getContext();
	// If focus is outside modal, and in the document, close menu
	// event.target === The element losing focus
	// event.relatedTarget === The element receiving focus (if any)
	// When focusout is outsite the document,
	// `window.document.activeElement` doesn't change.
	// The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.
	if (
	event.relatedTarget === null ||
	( ! modal?.contains( event.relatedTarget ) &&
	event.target !== window.document.activeElement )
	) {
	actions.closeMenu( 'click' );
	actions.closeMenu( 'focus' );
	}
	},

When you click away from the button element the focus gets lost for a moment which gets used as a trigger to close the navigation.