EZP-32180: Some of the selection list elements are not visible (#1688)

* EZP-32180: Some of the selection list elements are not visible * EZP-32180: fixed for top
ezsystems · Jan 12, 2021 · 5b341d8 · 5b341d8
1 parent 0a57db2
commit 5b341d8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js b/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js
@@ -59,9 +59,7 @@
 
         clearCurrentSelection() {
             this.sourceInput.querySelectorAll('option').forEach((option) => (option.selected = false));
-            this.itemsContainer
-                .querySelectorAll(SELECTOR_ITEM)
-                .forEach((option) => option.classList.remove(CLASS_ITEM_SELECTED_IN_LIST));
+            this.itemsContainer.querySelectorAll(SELECTOR_ITEM).forEach((option) => option.classList.remove(CLASS_ITEM_SELECTED_IN_LIST));
             this.container.querySelector(SELECTOR_SELECTION_INFO).innerHTML = '';
         }
 
@@ -85,9 +83,7 @@
                 element.querySelector('.ez-input').checked = selected;
             }
 
-            this.itemsContainer
-                .querySelector(`[data-value="${value}"]`)
-                .classList[cssMethodName](CLASS_ITEM_SELECTED_IN_LIST);
+            this.itemsContainer.querySelector(`[data-value="${value}"]`).classList[cssMethodName](CLASS_ITEM_SELECTED_IN_LIST);
 
             const selectedItemsList = this.container.querySelector(SELECTOR_SELECTION_INFO);
 
@@ -98,9 +94,7 @@
                 if (placeholder) {
                     placeholder.remove();
 
-                    this.itemsContainer
-                        .querySelector(SELECTOR_PLACEHOLDER)
-                        .classList.remove(CLASS_ITEM_SELECTED_IN_LIST);
+                    this.itemsContainer.querySelector(SELECTOR_PLACEHOLDER).classList.remove(CLASS_ITEM_SELECTED_IN_LIST);
                 }
 
                 selectedItemsList.insertAdjacentHTML('beforeend', this.createSelectedItem(value, label));
@@ -137,6 +131,18 @@
             this.sourceInput.dispatchEvent(new CustomEvent(EVENT_VALUE_CHANGED));
         }
 
+        getItemsContainerHeight(isItemsContainerTop) {
+            const DROPDOWN_MARGIN = 16;
+
+            if (isItemsContainerTop) {
+                return this.container.querySelector(SELECTOR_SELECTION_INFO).getBoundingClientRect().top - DROPDOWN_MARGIN;
+            }
+
+            return (
+                document.documentElement.getBoundingClientRect().height - this.itemsContainer.getBoundingClientRect().top - DROPDOWN_MARGIN
+            );
+        }
+
         onInputClick(event) {
             if (event.target.classList.contains(CLASS_REMOVE_SELECTION)) {
                 this.deselectOption(event.target.closest(SELECTOR_SELECTED_ITEM_IN_LABEL));
@@ -150,8 +156,10 @@
             if (isListHidden) {
                 const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
                 const { top } = this.itemsContainer.getBoundingClientRect();
-                const itemsListMethodName = top + ITEMS_LIST_MAX_HEIGHT > viewportHeight ? 'add' : 'remove';
+                const isItemsContainerTop = top + ITEMS_LIST_MAX_HEIGHT > viewportHeight;
+                const itemsListMethodName = isItemsContainerTop ? 'add' : 'remove';
 
+                this.itemsContainer.style['max-height'] = `${this.getItemsContainerHeight(isItemsContainerTop)}px`;
                 this.itemsContainer.classList[itemsListMethodName](CLASS_ITEMS_POSITION_TOP);
             }
 
@@ -179,10 +187,7 @@
 
             option.remove();
 
-            if (
-                !this.itemsContainer.querySelectorAll(SELECTOR_SELECTED_ITEM_IN_LIST).length &&
-                this.hasDefaultSelection
-            ) {
+            if (!this.itemsContainer.querySelectorAll(SELECTOR_SELECTED_ITEM_IN_LIST).length && this.hasDefaultSelection) {
                 this.hideOptions();
                 this.clearCurrentSelection();
                 this.selectFirstItem();

diff --git a/src/bundle/Resources/public/scss/core/_custom.dropdown.scss b/src/bundle/Resources/public/scss/core/_custom.dropdown.scss
@@ -136,6 +136,7 @@
         color: $ibexa-color-font;
         z-index: 2;
         border-radius: 0 0 $ibexa-border-radius $ibexa-border-radius;
+        overflow-y: auto;
 
         &--hidden {
             transform: scaleY(0);