Unverified Commit 06eac4f5 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, Gauravvvv, ranjith_kumar_k_u, larowlan, lauriii, oknate, tedbow: Layout builder filter leaves blank space
parent 0421a652

core/modules/layout_builder/js/layout-builder.es6.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/js/layout-builder.js

+7 −3
Original line number Diff line number Diff line
@@ -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

+21 −5
Original line number Diff line number Diff line
@@ -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');