From 293620bf34a992d8c2c4a59db63e76394944c123 Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Thu, 9 Jun 2022 13:49:18 +0200 Subject: [PATCH 1/2] IBX-2996: Hide group if all items are hidden in dropdown --- src/bundle/Resources/public/js/scripts/core/dropdown.js | 7 +++++++ src/bundle/Resources/public/scss/_dropdown.scss | 6 ++++++ 2 files changed, 13 insertions(+) diff --git a/src/bundle/Resources/public/js/scripts/core/dropdown.js b/src/bundle/Resources/public/js/scripts/core/dropdown.js index 91f546a585..b2f9289d41 100644 --- a/src/bundle/Resources/public/js/scripts/core/dropdown.js +++ b/src/bundle/Resources/public/js/scripts/core/dropdown.js @@ -276,6 +276,7 @@ filterItems(event) { const forceShowItems = event.currentTarget.value.length < MINIMUM_LETTERS_TO_FILTER; const allItems = [...this.itemsListContainer.querySelectorAll('[data-filter-value]')]; + const groups = [...this.itemsListContainer.querySelectorAll('.ibexa-dropdown__item-group')]; const separator = this.itemsListContainer.querySelector('.ibexa-dropdown__separator'); let hideSeparator = true; @@ -294,6 +295,12 @@ item.classList.toggle('ibexa-dropdown__item--hidden', !isItemVisible); }); + groups.forEach((group) => { + const isHidden = !group.querySelectorAll('.ibexa-dropdown__item:not(.ibexa-dropdown__item--hidden)').length; + + group.classList.toggle('ibexa-dropdown__item-group--hidden', isHidden); + }); + if (separator && !hideSeparator) { separator.removeAttribute('hidden'); } diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss index e640ad3092..f094748d9f 100644 --- a/src/bundle/Resources/public/scss/_dropdown.scss +++ b/src/bundle/Resources/public/scss/_dropdown.scss @@ -251,6 +251,12 @@ } } + &__item-group { + &--hidden { + display: none; + } + } + &__item-group-label { font-weight: bold; } From 7c27edf156208b2a2da36f3cc271b2301e69040e Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Fri, 10 Jun 2022 09:57:30 +0200 Subject: [PATCH 2/2] after review --- src/bundle/Resources/public/js/scripts/core/dropdown.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/core/dropdown.js b/src/bundle/Resources/public/js/scripts/core/dropdown.js index b2f9289d41..665c9d9378 100644 --- a/src/bundle/Resources/public/js/scripts/core/dropdown.js +++ b/src/bundle/Resources/public/js/scripts/core/dropdown.js @@ -296,9 +296,9 @@ }); groups.forEach((group) => { - const isHidden = !group.querySelectorAll('.ibexa-dropdown__item:not(.ibexa-dropdown__item--hidden)').length; + const areAllItemsHidden = !group.querySelectorAll('.ibexa-dropdown__item:not(.ibexa-dropdown__item--hidden)').length; - group.classList.toggle('ibexa-dropdown__item-group--hidden', isHidden); + group.classList.toggle('ibexa-dropdown__item-group--hidden', areAllItemsHidden); }); if (separator && !hideSeparator) {