WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 6 years ago

Last modified 6 years ago

#25972 closed defect (bug) (fixed)

MP6: Network admin menu not functional

Reported by: johnbillion Owned by: iammattthomas
Milestone: 3.8 Priority: high
Severity: normal Version: 3.8
Component: Administration Keywords: needs-patch dev-feedback
Focuses: ui Cc:

Description

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.

Attachments (5)

25972.diff (484 bytes) - added by ryelle 7 years ago.
25972.2.diff (497 bytes) - added by ninnypants 7 years ago.
25972.3.diff (709 bytes) - added by ninnypants 7 years ago.
Instead of trying to remove the prevent default just stop propagation on any items that aren't in the root of the menu.
25972.4.diff (1.0 KB) - added by ninnypants 7 years ago.
Fix double tap on links
25972.5.diff (1.2 KB) - added by azaozz 6 years ago.

Download all attachments as: .zip

Change History (27)

#1 @SergeyBiryukov
7 years ago

  • Component changed from Graphic Design to Administration
  • Keywords ui-focus added
  • Milestone changed from Awaiting Review to 3.8

@ryelle
7 years ago

#2 @ryelle
7 years ago

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.

#3 @melchoyce
7 years ago

  • Keywords has-patch added

#4 @johnbillion
7 years ago

#23496 was marked as a duplicate.

#5 @matt
7 years ago

  • Priority changed from normal to high

#6 @iammattthomas
7 years ago

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.

#7 @iammattthomas
7 years ago

  • Keywords needs-patch added; has-patch removed

@ninnypants
7 years ago

#8 @ninnypants
7 years ago

  • Cc tyrel@… added

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.

#9 @iammattthomas
7 years ago

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.

#10 @iammattthomas
7 years ago

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.

#11 @iammattthomas
7 years ago

In 26687:

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

#12 @iammattthomas
7 years ago

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.

#13 @iammattthomas
7 years ago

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.

#14 @ninnypants
7 years ago

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.

Last edited 7 years ago by ninnypants (previous) (diff)

#15 @nacin
7 years ago

  • Keywords dev-feedback added

Looks like we need more manpower here.

@ninnypants
7 years ago

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

@ninnypants
7 years ago

Fix double tap on links

#16 @ninnypants
7 years ago

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.

#17 @iammattthomas
7 years ago

In 26716:

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

#18 @iammattthomas
7 years ago

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.

#19 @iammattthomas
6 years ago

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.

#20 @iammattthomas
6 years ago

  • Owner set to iammattthomas
  • Resolution set to fixed
  • Status changed from new to closed

In 26770:

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

@azaozz
6 years ago

#21 @azaozz
6 years ago

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).

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

#22 @ninnypants
6 years ago

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

Note: See TracTickets for help on using tickets.