MP6: Network admin menu not functional

[johnbillion]

In the <782px media query, the Network Admin submenu of the My Sites menu is not accessible, and the Network Admin link itself does not trigger when touched. This means there is no way to access the Network Admin screen on a device such as a smartphone which triggers this media query.

Tested on Android Chrome on a Nexus 4. On desktop browsers resized down to trigger the <782px media query, the menu does actually work.

[ryelle]

The touchOpen function in admin-bar.js was closing the network admin dropdown (removing the hover class) as soon as any item was clicked. 25972.diff​ won't remove the hover class on any parents of the clicked element.

[johnbillion]

#23496 was marked as a duplicate.

[iammattthomas]

I believe the problem described in the ticket isn't actually related to touchOpen, as I'm still seeing the described behavior after applying ryelle's patch. iOS, Windows Phone, and Firefox on Android all open dropdowns on the first tap, and activate the link if you tap a second time. On Chrome/Android, the top-level link activates immediately, at the same time the dropdown menu appears. I've searched on this topic a bit but haven't yet found any obvious solutions.

[ninnypants]

The issue seems to still be in touchOpen. When an a that is the child of an li.menupop is clicked it doesn't have a hover class so default is prevented. My patch makes it so that only e.preventDefault() is only called when the event is triggered by a direct descendent of the root quick links menu.

[iammattthomas]

After applying 25972.2.diff​ I am still seeing the described error in Chrome on Android, and it actually causes a regression in Safari on iOS where the dropdown menus currently work fine in trunk.

[iammattthomas]

Beyond the issue with Chrome activating links on first tap, making the dropdowns inaccessible, there's one separate issue that's also related to the bug described in this ticket: submenus within dropdowns aren't shown at all at responsive sizes. I'm working on a fix that makes submenus permanently visible inside dropdowns at screens below 600px, and makes them appear as normal submenus at screen sizes between 782px–600px.

[iammattthomas]

In 26687:

Un-hide dropdown submenus at responsive sizes, make submenus within dropdowns appear as inline lists at mobile device sizes. See #25972.

[iammattthomas]

Ok, dropdown submenus are at least visible now after r26687 and appear to be fully functional in desktop browsers. Unfortunately the submenu links aren't activating on any touch devices I've used, including Safari/iOS, Chrome/Android, and Firefox/Android. I'm not sure why this is, but will keep digging around.

[iammattthomas]

One more data point: submenu links appear to activate fine when I'm on the front end of my site, but don't do anything when in the backend. So for example, on a mobile device and a multisite installation:

On the front-end:

• Tap the network (key) menu
• Tap a sub-menu link under Network Admin: Dashboard, Sites, Users, etc.
• The link will direct you to the selected page as expected.

On the back-end:

• Tap the network menu
• Tap a sub-menu link
• The dropdown menu will disappear, but the link isn't activated and the new page isn't loaded.

[ninnypants]

It seems to be confined to the the My Sites tab from my testing IOS7/Safari/chrome

My Sites(key):

• Tap network menu
• Tap Submenu item
• Dropdown disappears link isn't activated and new page doesn't load

Site Name Menu(world):

• Tap World menu
• Tap submenu item
• Loads selected page

This is on a fresh Multisite install that includes the changes in r26687. If I apply my patch(25972.2.diff) it works correctly for both menus.

[nacin]

Looks like we need more manpower here.

[ninnypants]

Instead of trying to remove the prevent default just stop propagation on any items that aren't in the root of the menu.

[ninnypants]

Fix double tap on links

[ninnypants]

Trying to disable blocking sublink taps with js was trickier because the event target wasn't always the first child of the current event target, so I switched menus back to being dropdowns and everything seems to be working correctly.

[iammattthomas]

In 26716:

Make toolbar dropdown submenu links tappable. See #25972, props ninnypants.

[iammattthomas]

r26716 gets dropdown submenu links working correctly on touch devices. Only outstanding issue now is that Chrome on Android is still activating top-level links on first touch, making dropdowns inaccessible.

[iammattthomas]

This CSS is causing this behavior:

html #wpadminbar {
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	-webkit-transition: 0;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	transition: 0;
}

I've tested commenting this out and it appears to have no ill effects on any other touch devices. I'll leave it commented out for now, but can delete later after inquiring with the MP6 team about what it was intended to do in the first place. Since I can find no regression caused by its removal I think it's worth solving this major bug in a major browser with this change.

[iammattthomas]

In 26770:

Comment out these touch-related styles as they break toolbar dropdowns in Chrome for Android. Fixes #25972.

[azaozz]

25972.5.diff fixes this here (without changing the css) on Android 4.3. The problem I've seen is that for some reason jQuery in Android/Chrome wouldn't fire adminbar.on('touchstart'..., but fires $(document).on( 'touchstart.wp-mobile-hover', '#wpadminbar',....

Tested on Android 4.3 (phone) and iOS 7 (iPad).

[ninnypants]

It works well for me on iPhone in both chrome and safari.