Issue #3223048 by smustgrave, Rishi Kulshreshtha, Theresa.Grannum,...

Issue #3223048 by smustgrave, Rishi Kulshreshtha, Theresa.Grannum, tim.plunkett, Gauravvvv, ranjith_kumar_k_u, larowlan, lauriii, oknate, tedbow: Layout builder filter leaves blank space

core/modules/layout_builder/js/layout-builder.es6.js

@@ -43,9 +43,16 @@
          *   The link to add the block.
          */
         const toggleBlockEntry = (index, link) => {
+          const $link = $(link);
           const textMatch =
             link.textContent.toLowerCase().indexOf(query) !== -1;
-          $(link).toggle(textMatch);
+          // Checks if a category is currently hidden.
+          // Toggles the category on if so.
+          if ($link.closest('.js-layout-builder-category').is(':hidden')) {
+            $link.closest('.js-layout-builder-category').show();
+          }
+          // Toggle the li tag of the matching link.
+          $link.parent().toggle(textMatch);
         };
 
         // Filter if the length of the query is at least 2 characters.
@@ -82,15 +89,17 @@
             .find('.js-layout-builder-category[remember-closed]')
             .removeAttr('open')
             .removeAttr('remember-closed');
+          // Show all categories since filter is turned off.
           $categories.find('.js-layout-builder-category').show();
-          $filterLinks.show();
+          // Show all li tags since filter is turned off.
+          $filterLinks.parent().show();
           announce(Drupal.t('All available blocks are listed.'));
         }
       };
 
       $(
         once('block-filter-text', 'input.js-layout-builder-filter', context),
-      ).on('keyup', debounce(filterBlockList, 200));
+      ).on('input', debounce(filterBlockList, 200));
     },
   };
 

core/modules/layout_builder/js/layout-builder.js

@@ -18,8 +18,12 @@
       var filterBlockList = function filterBlockList(e) {
         var query = e.target.value.toLowerCase();
         var toggleBlockEntry = function toggleBlockEntry(index, link) {
+          var $link = $(link);
           var textMatch = link.textContent.toLowerCase().indexOf(query) !== -1;
-          $(link).toggle(textMatch);
+          if ($link.closest('.js-layout-builder-category').is(':hidden')) {
+            $link.closest('.js-layout-builder-category').show();
+          }
+          $link.parent().toggle(textMatch);
         };
         if (query.length >= 2) {
           $categories.find('.js-layout-builder-category:not([open])').attr('remember-closed', '');
@@ -32,11 +36,11 @@
           layoutBuilderBlocksFiltered = false;
           $categories.find('.js-layout-builder-category[remember-closed]').removeAttr('open').removeAttr('remember-closed');
           $categories.find('.js-layout-builder-category').show();
-          $filterLinks.show();
+          $filterLinks.parent().show();
           announce(Drupal.t('All available blocks are listed.'));
         }
       };
-      $(once('block-filter-text', 'input.js-layout-builder-filter', context)).on('keyup', debounce(filterBlockList, 200));
+      $(once('block-filter-text', 'input.js-layout-builder-filter', context)).on('input', debounce(filterBlockList, 200));
     }
   };
   Drupal.layoutBuilderBlockUpdate = function (item, from, to) {

core/modules/layout_builder/tests/src/FunctionalJavascript/BlockFilterTest.php

@@ -62,7 +62,7 @@ public function testBlockFilter() {
 
     // Get all blocks, for assertions later.
     $blocks = $page->findAll('css', '.js-layout-builder-block-link');
-    $categories = $page->findAll('css', '.js-layout-builder-category');
+    $categories = $page->findAll('css', '.js-layout-builder-categories li');
 
     $filter = $assert_session->elementExists('css', '.js-layout-builder-filter');
 
@@ -89,16 +89,32 @@ public function testBlockFilter() {
     $fewer_blocks_message = ' blocks are available in the modified list';
     $this->assertAnnounceContains($fewer_blocks_message);
     $visible_rows = $this->filterVisibleElements($blocks);
-    $this->assertGreaterThan(0, count($blocks));
-    $this->assertLessThan(count($blocks), count($visible_rows));
+    $this->assertCount(4, $visible_rows);
     $visible_categories = $this->filterVisibleElements($categories);
-    $this->assertGreaterThan(0, count($visible_categories));
-    $this->assertLessThan(count($categories), count($visible_categories));
+    $this->assertCount(4, $visible_categories);
 
     // Test Drupal.announce() message when multiple matches are present.
     $expected_message = count($visible_rows) . $fewer_blocks_message;
     $this->assertAnnounceContains($expected_message);
 
+    // Test 3 letter search.
+    $filter->setValue('adm');
+    $visible_rows = $this->filterVisibleElements($blocks);
+    $this->assertCount(3, $visible_rows);
+    $visible_categories = $this->filterVisibleElements($categories);
+    $this->assertCount(3, $visible_categories);
+
+    // Retest that blocks appear when reducing letters.
+    $filter->setValue('ad');
+    $visible_rows = $this->filterVisibleElements($blocks);
+    $this->assertCount(4, $visible_rows);
+    $visible_categories = $this->filterVisibleElements($categories);
+    $this->assertCount(4, $visible_categories);
+
+    // Test blocks reappear after being filtered by repeating search for "a".
+    $filter->setValue('a');
+    $this->assertAnnounceContains('All available blocks are listed.');
+
     // Test Drupal.announce() message when only one match is present.
     $filter->setValue('Powered by');
     $this->assertAnnounceContains(' block is available');