Ticket #32710: 32710.6.diff

src/wp-admin/css/customize-nav-menus.css

@@ -584 +584 @@
         bottom: 0;
         left: -301px;
         visibility: hidden;
-        overflow: hidden;
+        overflow-x: hidden;
+        overflow-y: auto;
         width: 300px;
         margin: 0;
         z-index: 4;
@@ -598 +599 @@
         overflow-y: auto;
 }
 
+#available-menu-items #available-menu-items-search.open {
+        border-bottom: none;
+}
+
 #available-menu-items .accordion-section-title {
         border-left: none;
         border-right: none;
         background: #fff;
 }
 
-#available-menu-items .open .accordion-section-title {
+#available-menu-items .open .accordion-section-title,
+#available-menu-items #available-menu-items-search .accordion-section-title {
         background: #eee;
 }
 
@@ -696 +702 @@
         max-height: 290px;
 }
 
+#available-menu-items #available-menu-items-search .accordion-section-content {
+        position: absolute;
+        top: 60px; /* below title div / search input */
+        bottom: 0px; /* 100% height that still triggers lazy load */
+        max-height: none;
+}
+
 #available-menu-items .menu-item-tpl {
         margin: 0;
 }

src/wp-admin/js/customize-nav-menus.js

@@ -96 +96 @@
                 events: {
                         'input #menu-items-search': 'debounceSearch',
                         'keyup #menu-items-search': 'debounceSearch',
-                        'click #menu-items-search': 'debounceSearch',
                         'focus .menu-item-tpl': 'focus',
                         'click .menu-item-tpl': '_submit',
                         'click #custom-menu-item-submit': '_submitLink',
@@ -176 +175 @@
                 // Search input change handler.
                 search: function( event ) {
                         var $searchSection = $( '#available-menu-items-search' ),
-                                $openSections = $( '#available-menu-items .accordion-section.open' );
+                                $otherSections = $( '#available-menu-items .accordion-section' ).not( $searchSection );
 
                         if ( ! event ) {
                                 return;
                         }
-                        // Manual accordion-opening behavior.
-                        if ( this.searchTerm && ! $searchSection.hasClass( 'open' ) ) {
-                                $openSections.find( '.accordion-section-content' ).slideUp( 'fast' );
+
+                        if ( this.searchTerm === event.target.value ) {
+                                return;
+                        }
+
+                        if ( '' !== event.target.value && ! $searchSection.hasClass( 'open' ) ) {
+                                $otherSections.fadeOut( 100 );
                                 $searchSection.find( '.accordion-section-content' ).slideDown( 'fast' );
-                                $openSections.find( '[aria-expanded]' ).first().attr( 'aria-expanded', 'false' );
-                                $openSections.removeClass( 'open' );
                                 $searchSection.addClass( 'open' );
-                        }
-                        if ( '' === event.target.value ) {
+                        } else if ( '' === event.target.value ) {
                                 $searchSection.removeClass( 'open' );
+                                $otherSections.show();
                         }
-                        if ( this.searchTerm === event.target.value ) {
-                                return;
-                        }
+                        
                         this.searchTerm = event.target.value;
                         this.pages.search = 1;
                         this.doSearch( 1 );
@@ -264 +263 @@
                         self.currentRequest.fail(function( data ) {
                                 // data.message may be undefined, for example when typing slow and the request is aborted.
                                 if ( data.message ) {
-                                        $content.empty().append( $( '<p class="nothing-found"></p>' ).text( data.message ) );
+                                        $content.empty().append( $( '<div class="nothing-found"></p>' ).html( data.message ) );
                                         wp.a11y.speak( data.message );
                                 }
                                 self.pages.search = -1;

src/wp-includes/class-wp-customize-nav-menus.php

@@ -217 +217 @@
                 $items = $this->search_available_items_query( array( 'pagenum' => $p, 's' => $s ) );
 
                 if ( empty( $items ) ) {
-                        wp_send_json_error( array( 'message' => __( 'No menu items found.' ) ) );
+                        wp_send_json_error( array( 'message' => '<p>' . __( 'No results found.' ) . '</p><p>' . __( 'You must create and publish content before you can add it as a menu item. You can also add links to external sites in the Custom Links section.' ) . '</p>' ) );
                 } else {
                         wp_send_json_success( array( 'items' => $items ) );
                 }

tests/phpunit/tests/ajax/CustomizeMenus.php

@@ -520 +520 @@
                                 array(
                                         'success' => false,
                                         'data'    => array(
-                                                'message' => 'No menu items found.',
+                                                'message' => '<p>No menu items found.</p><p>You must create and publish content before you can add it as a menu item. You can also add links to external sites in the Custom Links section.</p>',
                                         ),
                                 ),
                         ),