Mobile admin menu: Clicking on menu items hides the menu

[dhusakovic]

Using WP 5.9 RC 2

Steps to reproduce:

1. Use a mobile device (tested with iPhone)
2. Login to admin via browser (tested with Safari and Chrome)
3. Expand the admin menu
4. Click on one of the main items (Posts, Users, etc)
5. Admin menu is hidden
6. Open menu again
7. Item clicked has been expanded showing subitems.

[SergeyBiryukov]

Thanks for the report!

Per ​Slack message, this may have been introduced in 5.9 RC, moving to the milestone for investigation.

Also moving to the Administration component, as Menus is specifically for the Menus screen and nav menu functions.

[costdev]

Test Report

Env

• WordPress 5.9 Beta 3, 5.9 RC1, 5.9 RC2
• (IRL) - Android - Chrome 97.0.4692.87
• (Browserstack - Real device) - iPhone 12 v14.1 - Chrome 92.0.4515.90
• (Browserstack - Real device) - iPhone 12 v14.1 - Safari 14
• Theme: Twenty Twenty One
• Gutenberg Editor
• Plugin: None activated

Steps to test

1. Login to admin via browser
2. Expand the admin menu
3. Click on Posts.
4. Admin menu is hidden ❌ - Admin menu is still shown.
5. Open menu again ❌- Admin menu is already open.
6. Item clicked has been expanded showing subitems. ✅ - Expected behaviour.

Results

• Cannot reproduce on:
  • Android Chrome (5.9 Beta 3, 5.9 RC1 or 5.9 RC2).
  • iPhone 12 v14.1 Chrome (5.9 Beta 3, 5.9 RC1 or 5.9 RC2).
  • iPhone 12 v14.1 Safari (5.9 Beta 3, 5.9 RC1 or 5.9 RC2).

Notes

• It would be beneficial to know what version of iOS, Safari and Chrome were used when the issue was originally detected. Adding reporter-feedback to get more information.
• It would be beneficial for a tester with a physical iPhone in front of them to test this issue.
• If the issue is reproduced on an iPhone and only appeared in 5.9, then it's likely related to 51946.

[costdev]

Removing reporter-feedback. The issue was originally produced on iPhone 11 and iPhone 12.

I was unable to reproduce the issue in Browserstack - Real device - iPhone 11 in Safari or Chrome.

A test report from another tester using an iPhone 11 or 12 would be much appreciated.

Adding needs-testing, has-testing-info and requesting manual testing to reproduce the issue from the folks in the #core-test Slack channel to get this attention ahead of RC3 tomorrow.

[thelovekesh]

I am able to reproduce the same bug on the mobile devices using the chrome device toolbar.

[costdev]

Thanks @thelovekesh!

If you're comfortable editing code, please do the following:

1. Add the following to wp-config.php:

   define( 'SCRIPT_DEBUG', true );
   

2. Open wp-admin/js/common.js.
3. Search for Close sidebar. This should bring you to the following block of code:

   // Close sidebar when focus moves outside of toggle and sidebar.
   $( '#wp-admin-bar-menu-toggle, #adminmenumain' ).on( 'focusout', function() {
       var focusIsInToggle, focusIsInSidebar;
   
       if ( ! $wpwrap.hasClass( 'wp-responsive-open' ) ) {
           return;
       }
   
       // A brief delay is required to allow focus to switch to another element.
       setTimeout( function() {
           focusIsInToggle  = $.contains( $( '#wp-admin-bar-menu-toggle' )[0], $( ':focus' )[0] );
           focusIsInSidebar = $.contains( $( '#adminmenumain' )[0], $( ':focus' )[0] );
   
           if ( ! focusIsInToggle && ! focusIsInSidebar ) {
               $( '#wp-admin-bar-menu-toggle' ).trigger( 'click.wp-responsive' );
           }
       }, 10 );
   } );
   

4. Delete this block of code and save the file.
5. Perform a hard refresh (Cmd+R or Ctrl + F5 depending on your device).
6. Let us know if you are still able to reproduce the issue.

[dhusakovic]

@costdev, confirming that removing that block of code does fix the issue.

[costdev]

Thanks @dhusakovic!

@SergeyBiryukov, looks like we need to consider [51946] as a revert candidate. If it's reverted, we should reopen #53587 and milestone it for 6.0.

[audrasjb]

Reverting and moving to 6.0 may be the safer option given the last release candidate is tomorrow.

Also pinging @joedolson who worked on [51946], for information.

[hellofromTonya]

​Spoke with @joedolson on slack who confirmed okay to revert [51946] and move resolution to 6.0. Revert will happen on its original ticket, i.e. #53587 with a reference to this new ticket.

[hellofromTonya]

In 52591:

Administration: Revert [51946].

Reverting changeset due to reported issue of menu being hidden after clicking on certain mobile devices.

Props dhusakovic, audrasjb, SergeyBiryukov, costdev, joedolson.
See #54837, #53587.

[hellofromTonya]

In 52592:

Administration: Revert [51946].

Reverting changeset due to reported issue of menu being hidden after clicking on certain mobile devices.

Props dhusakovic, audrasjb, SergeyBiryukov, costdev, joedolson.
Reverts [51946] on the 5.9 branch.
See #54837, #53587.

[hellofromTonya]

@dhusakovic the change has been reverted. To keep the conversation and resolution in one place, I'd suggest moving the conversation to the original ticket #53587.

[sabernhardt]

Closing this ticket to keep discussion about any future changes on #53587