Make WordPress Core

Changeset 56810


Ignore:
Timestamp:
10/09/2023 11:00:11 PM (12 months ago)
Author:
joedolson
Message:

Administration: Fix unusable mobile admin menu in Safari.

Replace the focusout event handler added in [55326] with a combination of blur and keyup handler. This change handles Safari not setting focus on clicked elements.

Props afercia, joedolson, travel_girl, oglekler, rajinsharwar, marybaum, rcorrales, binsaifullah, shubhamsedani, ashikur698.
Fixes #58912.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/admin/common.js

    r56774 r56810  
    17031703            } );
    17041704
    1705             // Close sidebar when focus moves outside of toggle and sidebar.
    1706             $( '#wp-admin-bar-menu-toggle, #adminmenumain' ).on( 'focusout', function() {
    1707                 var focusIsInToggle, focusIsInSidebar;
    1708 
     1705            // Close sidebar when target moves outside of toggle and sidebar.
     1706            $( document ).on( 'click', function( event ) {
    17091707                if ( ! $wpwrap.hasClass( 'wp-responsive-open' ) || ! document.hasFocus() ) {
    17101708                    return;
    17111709                }
    1712                 // A brief delay is required to allow focus to switch to another element.
    1713                 setTimeout( function() {
    1714                     focusIsInToggle  = $.contains( $( '#wp-admin-bar-menu-toggle' )[0], $( ':focus' )[0] );
    1715                     focusIsInSidebar = $.contains( $( '#adminmenumain' )[0], $( ':focus' )[0] );
    1716 
    1717                     if ( ! focusIsInToggle && ! focusIsInSidebar ) {
    1718                         $( '#wp-admin-bar-menu-toggle' ).trigger( 'click.wp-responsive' );
     1710
     1711                var focusIsInToggle  = $.contains( $( '#wp-admin-bar-menu-toggle' )[0], event.target );
     1712                var focusIsInSidebar = $.contains( $( '#adminmenuwrap' )[0], event.target );
     1713
     1714                if ( ! focusIsInToggle && ! focusIsInSidebar ) {
     1715                    $( '#wp-admin-bar-menu-toggle' ).trigger( 'click.wp-responsive' );
     1716                }
     1717            } );
     1718
     1719            // Close sidebar when a keypress completes outside of toggle and sidebar.
     1720            $( document ).on( 'keyup', function( event ) {
     1721                var toggleButton   = $( '#wp-admin-bar-menu-toggle' )[0];
     1722                if ( ! $wpwrap.hasClass( 'wp-responsive-open' ) ) {
     1723                    return;
     1724                }
     1725                if ( 27 === event.keyCode ) {
     1726                    $( toggleButton ).trigger( 'click.wp-responsive' );
     1727                    $( toggleButton ).find( 'a' ).trigger( 'focus' );
     1728                } else {
     1729                    if ( 9 === event.keyCode ) {
     1730                        var sidebar        = $( '#adminmenuwrap' )[0];
     1731                        var focusedElement = event.relatedTarget || document.activeElement;
     1732                        // A brief delay is required to allow focus to switch to another element.
     1733                        setTimeout( function() {
     1734                            var focusIsInToggle  = $.contains( toggleButton, focusedElement );
     1735                            var focusIsInSidebar = $.contains( sidebar, focusedElement );
     1736                           
     1737                            if ( ! focusIsInToggle && ! focusIsInSidebar ) {
     1738                                $( toggleButton ).trigger( 'click.wp-responsive' );
     1739                            }
     1740                        }, 10 );
    17191741                    }
    1720                 }, 10 );
    1721             } );
    1722 
     1742                }
     1743            });
    17231744
    17241745            // Add menu events.
Note: See TracChangeset for help on using the changeset viewer.