WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 5 weeks ago

#49025 new defect (bug)

Twenty Twenty: Modal menu link with hash should scroll to that section on the page.

Reported by: acosmin Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.3.1
Component: Bundled Theme Keywords:
Focuses: ui, javascript Cc:
PR Number:

Description

Based on this support ticket: https://wordpress.org/support/topic/possible-bug-anchor-links-dont-work-in-js-flow-out-menu/

A possible fix would be to add this code in index.js, after line 156:

goToAnchor: function() {
	document.addEventListener( 'click', function( event ) {
		var target = event.target;

		if ( target.closest( '.modal-menu' ) && 'a' === target.tagName.toLowerCase() ) {
			var url, targetHref;
			
			url = location.href.split( '#' )[ 0 ];
			targetHref = target.href;
			
			this.untoggleModal( target.closest( '.cover-modal.active' ) );

			if( '' !== target.hash && -1 !== targetHref.indexOf( url ) ) {
				setTimeout( function() {
					var fakeEl = document.createElement( 'a' );

					fakeEl.href = targetHref;
					fakeEl.click();
				}, 550 );
			}
		}
	}.bind( this ) );
},

And after line 105, a call to the method: this.goToAnchor();

Change History (2)

#1 @raQai
6 weeks ago

This fix does not work reliably. Sometimes it works, sometimes it doesn't. Currently I do not have reproducible cases for working and non working behavior. Will update once I figured it out.

See https://foos.bogdan-iws.de/angebot/

"Menu" > "Angebot" > "Kicker Jugend" uses the anchor /angebot/#jugend
"Menu" > "Angebot" > "Für Unternehmen" uses the anchor /angebot/#unternehmen

Chromium 79.0.3945.88 (Official Build) Arch Linux (64-bit)

#2 @raQai
5 weeks ago

I found the issue. It was related to the Menu Image (https://de.wordpress.org/plugins/menu-image/) plugin since it creates span elements within the a link elements of the menu if images are present.

This would then trigger the click event on the span instead of the a resulting in 'a' === target.tagName.toLowerCase() returning false.

my temporary solution looks like this:

	goToAnchor: function () {
		document.addEventListener('click', function (event) {
			var target = event.target.closest('a');

			if (target && target.closest('.modal-menu') && 'a' === target.tagName.toLowerCase()) {
				var url, targetHref;

				url = location.href.split('#')[0];
				targetHref = target.href;

				this.untoggleModal(target.closest('.cover-modal.active'));

				if ('' !== target.hash && -1 !== targetHref.indexOf(url)) {
					setTimeout(function () {
						var fakeEl = document.createElement('a');

						fakeEl.href = targetHref;
						fakeEl.click();
					}, 550);
				}
			}
		}.bind(this));
	},
Version 0, edited 5 weeks ago by raQai (next)
Note: See TracTickets for help on using tickets.