diff --git a/core/modules/layout_builder/js/layout-builder.js b/core/modules/layout_builder/js/layout-builder.js index 5a9112717d7..f98e548945a 100644 --- a/core/modules/layout_builder/js/layout-builder.js +++ b/core/modules/layout_builder/js/layout-builder.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)); }, }; diff --git a/core/modules/layout_builder/tests/src/FunctionalJavascript/BlockFilterTest.php b/core/modules/layout_builder/tests/src/FunctionalJavascript/BlockFilterTest.php index 4474947a7ec..2afa093d759 100644 --- a/core/modules/layout_builder/tests/src/FunctionalJavascript/BlockFilterTest.php +++ b/core/modules/layout_builder/tests/src/FunctionalJavascript/BlockFilterTest.php @@ -61,7 +61,7 @@ class BlockFilterTest extends WebDriverTestBase { $assert_session->assertWaitOnAjaxRequest(); // Get all blocks, for assertions later. - $blocks = $page->findAll('css', '.js-layout-builder-block-link'); + $blocks = $page->findAll('css', '.js-layout-builder-categories li'); $categories = $page->findAll('css', '.js-layout-builder-category'); $filter = $assert_session->elementExists('css', '.js-layout-builder-filter'); @@ -89,16 +89,32 @@ class BlockFilterTest extends WebDriverTestBase { $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');