IBX-5576: [Payments] Issues with filters

ibexa · Apr 25, 2023 · 3ab831c · 3ab831c
1 parent 1ce04f0
commit 3ab831c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/core/dropdown.js b/src/bundle/Resources/public/js/scripts/core/dropdown.js
@@ -114,7 +114,7 @@
         }
 
         clearCurrentSelection(shouldFireChangeEvent = true) {
-            const overflowNumber = this.selectedItemsContainer.querySelector('.ibexa-dropdown__selected-overflow-number').cloneNode();
+            const overflowNumber = this.selectedItemsContainer.querySelector('.ibexa-dropdown__selected-overflow-number').cloneNode(true);
 
             this.sourceInput.querySelectorAll('option').forEach((option) => (option.selected = false));
             this.itemsListContainer.querySelectorAll('.ibexa-dropdown__item--selected').forEach((option) => {
@@ -127,7 +127,9 @@
                 }
             });
             this.selectedItemsContainer.innerHTML = '';
+            this.selectedItemsContainer.insertAdjacentHTML('beforeend', this.selectedItemsContainer.dataset.placeholderTemplate);
             this.selectedItemsContainer.append(overflowNumber);
+            this.fitItems();
 
             if (shouldFireChangeEvent) {
                 this.fireValueChangedEvent();
@@ -263,6 +265,7 @@
             let numberOfOverflowItems = 0;
             const selectedItems = this.selectedItemsContainer.querySelectorAll('.ibexa-dropdown__selected-item');
             const selectedItemsOverflow = this.selectedItemsContainer.querySelector('.ibexa-dropdown__selected-overflow-number');
+            const dropdownItemsContainerWidth = this.selectedItemsContainer.offsetWidth - RESTRICTED_AREA_ITEMS_CONTAINER;
 
             if (selectedItemsOverflow) {
                 selectedItems.forEach((item) => {
@@ -273,11 +276,7 @@
 
                     itemsWidth += item.offsetWidth;
 
-                    if (
-                        !isOverflowNumber &&
-                        index !== 0 &&
-                        itemsWidth > this.selectedItemsContainer.offsetWidth - RESTRICTED_AREA_ITEMS_CONTAINER
-                    ) {
+                    if (!isOverflowNumber && index !== 0 && itemsWidth > dropdownItemsContainerWidth) {
                         const isPlaceholder = item.classList.contains('ibexa-dropdown__selected-placeholder');
 
                         item.hidden = true;

diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss
@@ -426,7 +426,7 @@
     &--overflow {
         .ibexa-dropdown {
             &__selected-item {
-                max-width: calc(100% - #{calculateRem(96px)});
+                max-width: calc(100% - #{calculateRem(40px)});
             }
         }
     }