Bug #2699
closedAdmin bar dropdown links don't work on iPad
0%
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
Updated by Chris Stein about 11 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.
Updated by Boone Gorges about 11 years ago
Thanks, Chris. This does appear to be a WP problem. See http://core.trac.wordpress.org/ticket/23023
Updated by Matt Gold over 10 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.
Updated by Boone Gorges over 10 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?
Updated by Chris Stein over 10 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.
Updated by Boone Gorges over 10 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.
Updated by Chris Stein over 10 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.
Updated by Matt Gold over 10 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?
Updated by Boone Gorges over 10 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
Updated by Matt Gold over 10 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.