Unverified Commit a5291f0b authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

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

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

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

+12 −3
Original line number Diff line number Diff line
@@ -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/tests/src/FunctionalJavascript/BlockFilterTest.php

+21 −5
Original line number Diff line number Diff line
@@ -61,7 +61,7 @@ public function testBlockFilter() { 
    $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 @@ 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');