From 25494980e607ab1246e6b043f58a24a2443f193b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Fri, 8 Jan 2021 07:49:23 +0100 Subject: [PATCH 1/2] EZP-32180: Some of the selection list elements are not visible --- .../public/js/scripts/core/custom.dropdown.js | 20 +++++++------------ .../public/scss/core/_custom.dropdown.scss | 1 + 2 files changed, 8 insertions(+), 13 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 index 162d78ac8b..8c1ba7187a 100644 --- 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)); @@ -146,6 +140,8 @@ const isListHidden = this.itemsContainer.classList.contains(CLASS_ITEMS_HIDDEN); const bodyMethodName = isListHidden ? 'addEventListener' : 'removeEventListener'; + const itemsContainerHeight = + document.documentElement.getBoundingClientRect().height - this.itemsContainer.getBoundingClientRect().top - 16; if (isListHidden) { const viewportHeight = window.innerHeight || document.documentElement.clientHeight; @@ -155,6 +151,7 @@ this.itemsContainer.classList[itemsListMethodName](CLASS_ITEMS_POSITION_TOP); } + this.itemsContainer.style['max-height'] = `${itemsContainerHeight}px`; this.itemsContainer.classList.toggle(CLASS_ITEMS_HIDDEN); doc.body[bodyMethodName]('click', this.onClickOutside, false); } @@ -179,10 +176,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 index 5a74c433ec..21e8ef9693 100644 --- 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); From ab0c39da3699cca81b44e31fa47d9012ffb8ab96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Mon, 11 Jan 2021 09:04:30 +0100 Subject: [PATCH 2/2] EZP-32180: fixed for top --- .../public/js/scripts/core/custom.dropdown.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 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 index 8c1ba7187a..ca69d4455e 100644 --- a/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js +++ b/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js @@ -131,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)); @@ -140,18 +152,17 @@ const isListHidden = this.itemsContainer.classList.contains(CLASS_ITEMS_HIDDEN); const bodyMethodName = isListHidden ? 'addEventListener' : 'removeEventListener'; - const itemsContainerHeight = - document.documentElement.getBoundingClientRect().height - this.itemsContainer.getBoundingClientRect().top - 16; 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); } - this.itemsContainer.style['max-height'] = `${itemsContainerHeight}px`; this.itemsContainer.classList.toggle(CLASS_ITEMS_HIDDEN); doc.body[bodyMethodName]('click', this.onClickOutside, false); }