Customizer: focusing a control outside of a panel when a panel is open results in a blank screen with no navigation back

[celloexpressions]

When focusing a control in JS, ex. with something like:

wp.customize.control('site_icon').focus();

If a panel happens to be open (say, we're in widgets or menus somewhere and a context change to site icon is triggered by an interaction in the controls or the preview), and the newly-focused control is not nested within a panel, the Customizer controls become hidden off screen with no way to get them back without reloading.

This seems to be somewhat of an issue in 4.2 also, but navigation to get back was accessible. Now, there is no way for a user to recover from the results of this interaction. Reasonably simple fix in the attached patch (exact placement/approach could be adjusted, but this seems to be what we need and didn't break anything else in quick testing).

We would run into this with the shift-click widget focusing, but it steps around it since those controls are within a panel.

[celloexpressions]

Moving to 4.3 for tracking; it's late but a small change so it could probably get in. If not, we definitely need to get it into 4.3.1.

[celloexpressions]

Resulting UI after experiencing this bug.

[westonruter]

This is related to a workaround I had to put in place for the WP_Nav_Menu_Widget to deep link to the menus panel from a given nav menu widget:

<?php
if ( isset( $GLOBALS['wp_customize'] ) && $GLOBALS['wp_customize'] instanceof WP_Customize_Manager ) {
        // @todo When expanding a panel, the JS should be smart enough to collapse any existing panels and sections.
        $url = 'javascript: wp.customize.section.each(function( section ){ section.collapse(); }); wp.customize.panel( "nav_menus" ).focus();';
} else {
        $url = admin_url( 'nav-menus.php' );
}
?>
<?php echo sprintf( __( 'No menus have been created yet. <a href="%s">Create some</a>.' ), esc_attr( $url ) ); ?>

[westonruter]

Additional change: ​https://github.com/xwp/wordpress-develop/commit/12a50bfbf2c4574a06f54169d6a5484d1f831008

[westonruter]

Per my issue above, the problem of the blank screen was still happening if a section within a panel was open. So for instance, if I went to edit a widget and I opened the console and ran:

wp.customize.panel( 'nav_menus' ).focus();

Then I would get the same blank screen behavior, and this is why I put in that WP_Nav_Menu_Widget workaround.

In the latest patch I believe I've addressed this one as well, which now means that my workaround in the WP_Nav_Menu_Widget can also be removed. See amended patch 33396.2.diff​.

@celloexpressions Can you confirm?

[celloexpressions]

Looks good to me.

[westonruter]

In 33837:

Customizer: Collapse any expanded panel/sections before expanding other panel/sections

Fix removes need for workaround introduced in [33488] for direct link from nav menu widget to the customizer widgets panel. The todo is now implemented.

Props celloexpressions, westonruter.
Fixes #33396 for trunk.

[westonruter]

Re-opening for 4.3.1; [33837] will need to be cherry-picked into the 4.3 branch.

[westonruter]

In 33942:

Customizer: Collapse any expanded panel/sections before expanding other panel/sections.

Fix removes need for workaround introduced in [33488] for direct link from nav menu widget to the customizer widgets panel. The todo is now implemented.

Cherry-picks [33837] onto 4.3 branch.
Props celloexpressions, westonruter.
Fixes #33396 for 4.3.