WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#27980 closed defect (bug) (fixed)

Admin menu open/close issue on mobile devices

Reported by: bilalcoder Owned by:
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.9
Component: Menus Keywords: has-patch dev-feedback needs-testing
Focuses: ui, javascript, administration Cc:

Description

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();
});

Attachments (1)

27980.diff (1.0 KB) - added by adamsilverstein 6 years ago.
only check for clicks in responsive admin menu - android<4.1 doesn't fire touch events properly

Download all attachments as: .zip

Change History (14)

#1 follow-up: @bilalcoder
6 years ago

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

#2 in reply to: ↑ 1 ; follow-up: @adamsilverstein
6 years ago

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?

#3 in reply to: ↑ 2 ; follow-up: @bilalcoder
6 years ago

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.

Last edited 6 years ago by bilalcoder (previous) (diff)

#4 in reply to: ↑ 3 ; follow-up: @adamsilverstein
6 years ago

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?

#5 in reply to: ↑ 4 ; follow-ups: @bilalcoder
6 years ago

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.

#6 in reply to: ↑ 5 @adamsilverstein
6 years ago

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
6 years ago

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

#7 @adamsilverstein
6 years ago

  • Keywords has-patch dev-feedback added

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.

#8 in reply to: ↑ 5 ; follow-up: @adamsilverstein
6 years ago

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.

#9 @azaozz
6 years ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 3.9.2

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.

#10 in reply to: ↑ 8 @bilalcoder
6 years ago

Replying to adamsilverstein:

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

Unfortunately i couldn't find the ticket

#11 @Clorith
6 years ago

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.

This ticket was mentioned in IRC in #wordpress-dev by Clorith. View the logs.


6 years ago

#13 @azaozz
6 years ago

  • Milestone changed from 3.9.2 to 4.0
  • Resolution set to fixed
  • Status changed from new to closed

Fixed in [29247]:

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

Note: See TracTickets for help on using tickets.