Comments Menu Item Triggers Random Links on iPad

[miqrogroove]

This is reproducible on my iPad 3 with iOS 8.1.2:

1. Open admin in landscape orientation.
2. Collapse the admin menu.
3. Tap the thumbtack icon for posts.
4. Tap the Categories menu item.
5. Tap the balloon icon for comments.

Expected result: Comments page should open.

Actual result: Users page opens. :(

Also found:

1. Open admin in landscape orientation.
2. Collapse the admin menu.
3. Tap the thumbtack icon for posts.
4. Tap the Categories menu item.
5. Tap the Edit link for one of the categories.
6. Tap the balloon icon for comments.

Expected result: Comments page should open.

Actual result: Themes page opens. :(

[miqrogroove]

I confirmed this is a regression in trunk. In the 4.0.1 site I tested, tapping the comments icon will cause one of the menus to fly out rather than navigating to a different random page.

[azaozz]

Confirmed. Happens only on the Posts => Categories and Posts => Tags screens, seems caused by auto-focusing the first input field on page load.

Tapping anywhere on the screen would open the keyboard and auto scroll-into-view. The 'click' event fires after that auto-scroll so the actual click is on a completely different place on the screen. This affects all links/buttons, not just the menu.

[azaozz]

Replacing the (old) JS based autofocus with the HTML5 attribute changes the behavior in iOS Safari a bit but is still quite buggy. Now the onscreen keyboard opens, the page auto-scrolls and then the keyboard closes by itself...

Removing the autofocus for now. Seems we only have that for the Tags, Categories, Edit Tag, and Edit Category screens. If auto-focusing on page load is better for accessibility, can add the HTML attribute back except on mobile devices.

[azaozz]

In 30842:

Do not autofocus text fields on page load on mobile devices. This is currently broken in many mobile browsers:

• iOS Safari opens the keyboard and auto-scrolls on the first tap anywhere on the screen triggering the click at an unexpected place. That makes it impossible to follow links or press buttons.
• Chrome on iOS opens the keyboard on load and may scroll the focused field off screen.
• The Android 4.4 browser only highlights the field, the user has to tap it to open the keyboard and type.

See #30703.

[nacin]

I think we do focusing on setup-config.php and install.php too.

[azaozz]

Right. In install.php the focusing is already disabled for mobile devices.

In setup-config.php we focus a readonly textarea that doesn't trigger showing the keyboard. This is still kind of buggy in iOS, may auto-scroll on the first tap. Patching.

[azaozz]

In 30843:

iOS: do not autofocus the readonly textarea with the code for wp-config.php in setup-config.php.
See #30703.

[johnbillion]

In 30909:

iOS: do not autofocus the readonly textarea with the code for wp-config.php in setup-config.php.

Merges [30843] to the 4.1 branch.

Fixes #30703.

[johnbillion]

[30908] missed this ticket.