Admin menu open/close issue on mobile devices

[bilalcoder]

Clicking on admin menu items opens and closes the menu on both android and iphone devices,

at wp-admin/js/common.js (line 609) both 'touchend' and 'click' events are fired when clicking the menu.

$adminmenu.on( 'touchstart.wp-responsive', 'li.wp-has-submenu > a', function() {
	scrollStart = $window.scrollTop();
}).on( 'touchend.wp-responsive click.wp-responsive', 'li.wp-has-submenu > a', function( event ) {
	if ( ! $adminmenu.data('wp-responsive') ||
		( event.type === 'touchend' && $window.scrollTop() !== scrollStart ) ) {

		return;
	}

	$( this ).parent( 'li' ).toggleClass( 'selected' );
	event.preventDefault();
});

[bilalcoder]

not exactly sure, but i noticed $window.scrollTop() keeps the same value in both touchstart and touchend events.

[adamsilverstein]

Replying to bilalcoder:

not exactly sure, but i noticed $window.scrollTop() keeps the same value in both touchstart and touchend events.

are you testing this on an actual device or an emulator?

when I tried testing with browserstack (emulator based), I did see something like the issue you describe; testing on my iphone and nexus tablet, the menus worked as expected, the only issue I found was the posts.php page appears to be missing the common.js script that drives the menu - once I hit the posts page I can no longer use the menu at all, is this where you were by any chance?

[bilalcoder]

Replying to adamsilverstein:

i wanted to see how the administration looks with my actual Google android device and the menu items were not working properly, second time i tried using the xcode iPhone emulator and it wasn't working too, but today i tested again on the iphone emulator and suddenly it was working!? looks weird!, but it's still doesn't work on the android device.

Removing touchend event works properly on both devices.

[adamsilverstein]

Replying to bilalcoder:

Replying to adamsilverstein:

i wanted to see how the administration looks with my actual Google android device and the menu items were not working properly, second time i tried using the xcode iPhone emulator and it wasn't working too, but today i tested again on the iphone emulator and suddenly it was working!? looks weird!, but it's still doesn't work on the android device.

Removing touchend event works properly on both devices.

all these tests have been on the main admin dashboard.

my issue on the posts page was a plugin conflict, can you verify that you have all plugins disabled for testing?

[bilalcoder]

Replying to adamsilverstein:

my issue on the posts page was a plugin conflict, can you verify that you have all plugins disabled for testing?

i have no plugins installed, there are some reports for the same issue i found after i posted this ticket.

[adamsilverstein]

Replying to bilalcoder:

Replying to adamsilverstein:

my issue on the posts page was a plugin conflict, can you verify that you have all plugins disabled for testing?

i have no plugins installed, there are some reports for the same issue i found after i posted this ticket.

Thanks for the details.

It looks like there is a longstanding bug in Android < vs 4.1 (see ​http://code.google.com/p/android/issues/detail?id=19827) which keeps the touchend event from firing.

The proposed solution on these tickets is to add e.preventDefault() on the touchstart event, this prevents scrolling as well when clicking on the menu, so if you have the submenu items expanded, it is not possible to scroll down by dragging on the menu - you can still drag the screen by clicking on the content area.

Further review makes me question the need for tracking the touchstart and touchend events at all, I created a patch that just watches for click events and testing under browserstack I see good results for Android 4 devices as well as iPhone although I feel this deserves more testing and review - perhaps I have overlooked some other purpose for the touch specific events.

[adamsilverstein]

only check for clicks in responsive admin menu - android<4.1 doesn't fire touch events properly

[adamsilverstein]

in 27980.diff​ - only watch click events (not touchstart/touchend) for menu with submenu expansion in the responsive admin menu, otherwise we have an issue with android <4.1, sub-menus do not open properly and instead open/close immediately, making the menu essentially unusable.

Tested this on android 4.0 and ios 6 under browserstack, deserves further testing.

[adamsilverstein]

Replying to bilalcoder:

Replying to adamsilverstein:

my issue on the posts page was a plugin conflict, can you verify that you have all plugins disabled for testing?

i have no plugins installed, there are some reports for the same issue i found after i posted this ticket.

Can you please link to the reports you mentioned? Thanks.

[azaozz]

Can't confirm the original bug on iPad (iOS7) and Android 4.1. However 27980.diff works properly on these devices. Seems click doesn't fire after a scroll so there is no need to track the touchstart/touchend scrollTop difference.

Setting for 3.9.2 for now pending more testing.

[bilalcoder]

Replying to adamsilverstein:

Can you please link to the reports you mentioned? Thanks.

Unfortunately i couldn't find the ticket

[Clorith]

Can confirm that menus are still broken on trunk with android 4.3 and stock browser (the Chrome browser app from the Play Store does not show these symptoms).

Also unable to reproduce on iPad with iOS 7.1.2

27980.diff seems to have fixed it for stock browser and does not appear to add any unexpected behavior to any of my other devices.

[azaozz]

Fixed in [29247]:

Fix admin menu open/close issues on some mobile devices, props adamsilverstein, fixes #27980.