EZP-32170: Fixed policy limitation custom dropdown (#1654)

* EZP-32170: Fixed policy limitation custom dropdown * After CR
ezsystems · Nov 23, 2020 · 81ee760 · 81ee760
1 parent 33104b4
commit 81ee760
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 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
@@ -59,7 +59,9 @@
 
         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 = '';
         }
 
@@ -83,7 +85,9 @@
                 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);
 
@@ -94,7 +98,9 @@
                 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));
@@ -154,7 +160,7 @@
         }
 
         onOptionClick({ target }) {
-            const option = target.classList.contains(CLASS_CUSTOM_DROPDOWN_ITEM) ? target : target.closest(SELECTOR_ITEM);
+            const option = target.closest(SELECTOR_ITEM);
 
             return this.onSelect(option, !option.classList.contains(CLASS_ITEM_SELECTED_IN_LIST));
         }
@@ -165,15 +171,18 @@
             const itemSelected = this.itemsContainer.querySelector(`[data-value="${value}"]`);
 
             itemSelected.classList.remove(CLASS_ITEM_SELECTED_IN_LIST);
-            itemSelected.querySelector('.ez-input').checked = false
+            itemSelected.querySelector('.ez-input').checked = false;
 
             if (optionSelect) {
                 optionSelect.selected = false;
             }
 
             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();
@@ -192,11 +201,13 @@
             const selectedItemsOverflow = this.container.querySelector(SELECTOR_OVERFLOW_ITEM_INFO);
 
             if (selectedItemsOverflow) {
-                selectedItems.forEach(item => { item.hidden = false; })
-                selectedItems.forEach(item => {
+                selectedItems.forEach((item) => {
+                    item.hidden = false;
+                });
+                selectedItems.forEach((item) => {
                     itemsWidth += item.offsetWidth;
 
-                    if (itemsWidth > (selectedItemsContainer.offsetWidth - restrictedAreaItemsContainer)) {
+                    if (itemsWidth > selectedItemsContainer.offsetWidth - restrictedAreaItemsContainer) {
                         numberOfOverflowItems++;
                         item.hidden = true;
                     }

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/custom_dropdown.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/custom_dropdown.html.twig
@@ -26,7 +26,7 @@
             <li data-value="" class="ez-custom-dropdown__item"{% if required is defined and value is empty %} selected="selected"{% endif %}>{{ label }}</li>
         {% endif %}
         {% for choice in choices %}
-            <li data-value="{{ choice.value }}" class="ez-custom-dropdown__item">
+            <li data-value="{{ choice.value }}" class="ez-custom-dropdown__item {% if choice is selectedchoice(value) %}ez-custom-dropdown__item--selected{% endif %}">
                 {% if multiple is defined and multiple %}
                     <input type="checkbox" name="{{ source_selector }}-checkbox" class="ez-input ez-input--checkbox" {% if choice is selectedchoice(value) %}checked{% endif %} />
                 {% else %}