From af13b5e1267701ccb37e59735882e0edad358e7f Mon Sep 17 00:00:00 2001 From: konradoboza Date: Thu, 18 Feb 2021 13:59:08 +0100 Subject: [PATCH 1/3] EZP-32311: Dropdown bottom options become inaccessible inside modals --- .../public/js/scripts/core/custom.dropdown.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 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 cc5f7a30ec..daa5009d56 100644 --- a/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js +++ b/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js @@ -133,14 +133,19 @@ getItemsContainerHeight(isItemsContainerTop) { const DROPDOWN_MARGIN = 16; + const MODAL_SELECTOR = '.modal[aria-modal=true]'; + const documentElementHeight = document.documentElement.getBoundingClientRect().height; + const itemsContainerHeight = this.itemsContainer.getBoundingClientRect().top; if (isItemsContainerTop) { return this.container.querySelector(SELECTOR_SELECTION_INFO).getBoundingClientRect().top - DROPDOWN_MARGIN; } - return ( - document.documentElement.getBoundingClientRect().height - this.itemsContainer.getBoundingClientRect().top - DROPDOWN_MARGIN - ); + if (this.itemsContainer.closest(MODAL_SELECTOR)) { + return itemsContainerHeight - DROPDOWN_MARGIN; + } + + return documentElementHeight - itemsContainerHeight - DROPDOWN_MARGIN; } onInputClick(event) { From ef4eaa409ef77ed53a68cc69e9c4f1d26f2b5887 Mon Sep 17 00:00:00 2001 From: konradoboza Date: Fri, 19 Feb 2021 08:28:25 +0100 Subject: [PATCH 2/3] naming improvements --- .../public/js/scripts/core/custom.dropdown.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 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 daa5009d56..ed0e12b210 100644 --- a/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js +++ b/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js @@ -131,21 +131,21 @@ this.sourceInput.dispatchEvent(new CustomEvent(EVENT_VALUE_CHANGED)); } - getItemsContainerHeight(isItemsContainerTop) { + getItemsContainerHeight(isItemsContainerAbove) { const DROPDOWN_MARGIN = 16; - const MODAL_SELECTOR = '.modal[aria-modal=true]'; + const SELECTOR_MODAL = '.modal[aria-modal=true]'; const documentElementHeight = document.documentElement.getBoundingClientRect().height; - const itemsContainerHeight = this.itemsContainer.getBoundingClientRect().top; + const itemsContainerTop = this.itemsContainer.getBoundingClientRect().top; - if (isItemsContainerTop) { + if (isItemsContainerAbove) { return this.container.querySelector(SELECTOR_SELECTION_INFO).getBoundingClientRect().top - DROPDOWN_MARGIN; } - if (this.itemsContainer.closest(MODAL_SELECTOR)) { - return itemsContainerHeight - DROPDOWN_MARGIN; + if (this.itemsContainer.closest(SELECTOR_MODAL)) { + return itemsContainerTop - DROPDOWN_MARGIN; } - return documentElementHeight - itemsContainerHeight - DROPDOWN_MARGIN; + return documentElementHeight - itemsContainerTop - DROPDOWN_MARGIN; } onInputClick(event) { @@ -161,10 +161,10 @@ if (isListHidden) { const viewportHeight = window.innerHeight || document.documentElement.clientHeight; const { top } = this.itemsContainer.getBoundingClientRect(); - const isItemsContainerTop = top + ITEMS_LIST_MAX_HEIGHT > viewportHeight; - const itemsListMethodName = isItemsContainerTop ? 'add' : 'remove'; + const isItemsContainerAbove = top + ITEMS_LIST_MAX_HEIGHT > viewportHeight; + const itemsListMethodName = isItemsContainerAbove ? 'add' : 'remove'; - this.itemsContainer.style['max-height'] = `${this.getItemsContainerHeight(isItemsContainerTop)}px`; + this.itemsContainer.style['max-height'] = `${this.getItemsContainerHeight(isItemsContainerAbove)}px`; this.itemsContainer.classList[itemsListMethodName](CLASS_ITEMS_POSITION_TOP); } From afdbc260465a858e2604d4245bde0cb4c8b6eead Mon Sep 17 00:00:00 2001 From: konradoboza Date: Fri, 19 Feb 2021 09:19:58 +0100 Subject: [PATCH 3/3] cr remark --- src/bundle/Resources/public/js/scripts/core/custom.dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ed0e12b210..c2d7c86801 100644 --- a/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js +++ b/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js @@ -134,7 +134,7 @@ getItemsContainerHeight(isItemsContainerAbove) { const DROPDOWN_MARGIN = 16; const SELECTOR_MODAL = '.modal[aria-modal=true]'; - const documentElementHeight = document.documentElement.getBoundingClientRect().height; + const documentElementHeight = doc.documentElement.getBoundingClientRect().height; const itemsContainerTop = this.itemsContainer.getBoundingClientRect().top; if (isItemsContainerAbove) {