Project

General

Profile

Bug #2699

Admin bar dropdown links don't work on iPad

Added by Boone Gorges about 8 years ago. Updated over 7 years ago.

Status:
Resolved
Priority name:
High
Assignee:
Category name:
Toolbar
Target version:
Start date:
2013-08-14
Due date:
% Done:

0%

Estimated time:

Description

When you click on the links in the admin bar dropdowns when using an iPad, they don't go anywhere. This only applies to nested menus, eg when a logged-in user clicks My Commons; the My Profile, My Groups, etc links just close the menu altogether (instead of going to the My Groups page or opening the next-level menu, either of which would be preferable).

It's possible that this is a bug in the WP menus themselves.


Related issues

Related to CUNY Academic Commons - Bug #2837: Interface Issues on Touch DevicesResolved2013-10-18

Has duplicate CUNY Academic Commons - Bug #2727: Admin Bar issues on Tablet and Touch devicesDuplicate2013-08-23

History

#1 Updated by Boone Gorges about 8 years ago

  • Target version set to 1.6

#2 Updated by Chris Stein about 8 years ago

I looked at this for a while and I can't say anything definitive but I think the issues are in wp-includes/js/admin-bar.js (production uses admin-bar.min.js).

The code there is pretty complicated for a dropdown and a lot of it seems to be using the jQuery HoverIntent and managing the hover process. Because hovering doesn't work for touch screens there is also code in there to try to test for touch screens and still allow the dropdown to work. Part of that code uses the preventDefault() function in JavaScript so that clicking on the link, like the avatar, causes a dropdown to occur instead of going directly to the link. I'm guessing (not sure at all) that this is where the problem lies.

For example let's take My Profile which is in the dropdown but also has a sub menu of it's own (View, Edit, Change Avatar). My Profile is a link to the profile page but it also needs to function as a trigger for its submenu. The hover functionality works fine for this where hovering triggers submenus and clicking triggers the link. But on mobile it seems like the code is not working.

Here's my theory on why the links aren't working. My Profile is actually an anchor tag that links to the user's profile. In order to show the submenu for it on touch (for the mouse the menu shows on hover) code was written to stop the click from taking you to the link and instead triggering the sub menu to show. But there is something wrong with this code so that while the My Profile link is disabled the sub menu of My Profile is not triggered properly and doesn't work.

What I would expect to be the desired functionality on mobile is that the first click on an item with a submenu would show that menu and then the user could click on the submenu to go to the desired location. Clicking a second time should retract the sub menu. So to view a profile on touch the user would click Avatar > My Profile > View.

I suppose you could also make My Profile a link to the profile but then you have to write logic that knows the first click shows the sub menu and the second click on My Profile allows the link.

Overall, it seems like it would be easier for everything to remove the hover functionality and simplify the code so that it all works on clicks. But that would be a big rewrite. Perhaps there are other options.

#3 Updated by Boone Gorges about 8 years ago

Thanks, Chris. This does appear to be a WP problem. See http://core.trac.wordpress.org/ticket/23023

#4 Updated by Boone Gorges over 7 years ago

  • Category name set to Toolbar

#5 Updated by Matt Gold over 7 years ago

  • Priority name changed from Normal to High

Hi Boone -- Have you seen any movement on this at the WP level? This seems like a significant issue to me.

#6 Updated by Boone Gorges over 7 years ago

  • Status changed from New to Reporter Feedback

Since our most recent toolbar update, I'm not able to reproduce the original issues anymore. Flyout menus seem to be working properly at all levels of nesting. Can I get someone else with a touch device/iPad to verify?

#7 Updated by Boone Gorges over 7 years ago

  • Assignee set to Chris Stein

#8 Updated by Chris Stein over 7 years ago

  • Status changed from Reporter Feedback to Assigned
  • Assignee changed from Chris Stein to Boone Gorges

Boone, I tried to look a this on my ipad and the admin bar disappeared. I tried it a couple of times and saw this time that it appears at first and then disappears when the UserVoice Feedback button appears on the right side of the screen. Maybe there is some issue with that code that's conflicting on mobile devices. A (very) quick Google search didn't turn up anyone with a similar issue but that might be a place to look.

Giving it back to you since I can't do much now that I can't click on the admin bar from my ipad.

#9 Updated by Boone Gorges over 7 years ago

  • Assignee changed from Boone Gorges to Chris Stein

Chris, can you please test with the teststudent creds? I will try in the meantime to get around to looking at the issue with your account. Thanks for the UserVoice pointer btw.

#10 Updated by Chris Stein over 7 years ago

  • Status changed from Assigned to Resolved

Boone, sorry, I forgot that issue was only with my account.

So good news is that when I login with teststudent then the nav links work fine. Subnav elements behave as expected. First click shows sub nav second click takes to page (like clicking My Groups once shows the subnav and then twice takes you to the Groups page with My Groups showing.

Some more on the UserVoice thing. I tried downloading the homepage and uploading to one of my sites and when I went on iPad I didn't see the admin bar. Then I tried removing the USERVOICE stuff and I could see the admin bar again. That seems to be some odd combination of UserVoice and my login.

Marking this as resolved.

#11 Updated by Matt Gold over 7 years ago

Whoa -- this is one of the biggest outstanding issues we have. Boone, can you please confirm that this is resolved when you test on an iPad?

#12 Updated by Boone Gorges over 7 years ago

Yes, second-level items are working fine for me.

UserVoice was disabled for mobile user agents in https://github.com/castiron/cac/commit/032d8eb62df0c68780919cef903a2d09b93c07c5

#13 Updated by Matt Gold over 7 years ago

Really fantastic. I had thought we were waiting for this fix to come in - https://core.trac.wordpress.org/ticket/23023 - in order to solve this. I am delighted that this is no longer a problem on the Commons.

Also available in: Atom PDF