IBX-3922: Fix dropdown inside modal

src/bundle/Resources/public/js/scripts/core/dropdown.js

@@ -12,16 +12,6 @@
             this.dropdown = dropdown;
         }
 
-        toggle(event) {
-            if (event.target.classList.contains('ibexa-dropdown__remove-selection')) {
-                this.dropdown.deselectOption(event.target.closest('.ibexa-dropdown__selected-item'));
-
-                return;
-            }
-
-            super.toggle(event);
-        }
-
         show() {
             if (this.dropdown.container.classList.contains('ibexa-dropdown--disabled')) {
                 return;
@@ -81,13 +71,24 @@
             ibexa.helpers.objectInstances.setInstance(this.container, this);
         }
 
+        attachSelectedItemEvents(item) {
+            const removeSelectionBtn = item.querySelector('.ibexa-dropdown__remove-selection');
+
+            removeSelectionBtn.addEventListener('click', (event) => {
+                event.stopPropagation();
+                this.deselectOption(item);
+            });
+        }
+
         createSelectedItem(value, label, icon) {
             const container = doc.createElement('div');
             const selectedItemRendered = this.selectedItemTemplate.replace('{{ value }}', value).replace('{{ label }}', label);
 
             container.insertAdjacentHTML('beforeend', selectedItemRendered);
 
             const selectedItemNode = container.querySelector('.ibexa-dropdown__selected-item');
+            const removeSelectionBtn = selectedItemNode.querySelector('.ibexa-dropdown__remove-selection');
+
             if (icon) {
                 const iconWrapper = container.querySelector('.ibexa-dropdown__selected-item-icon');
                 const selectedItemIconRendered = this.selectedItemIconTemplate.replace('{{ icon }}', icon);
@@ -97,6 +98,13 @@
 
             selectedItemNode.classList.toggle('ibexa-dropdown__selected-item--has-icon', !!icon);
 
+            this.attachSelectedItemEvents(selectedItemNode);
+
+            removeSelectionBtn.addEventListener('click', (event) => {
+                event.stopPropagation();
+                this.deselectOption(selectedItemNode);
+            });
+
             return selectedItemNode;
         }
 
@@ -444,16 +452,14 @@
                 return;
             }
 
-            const modalDialog = this.container.closest('.modal-dialog');
-
             this.itemsPopover = new DropdownPopover(
                 this.selectedItemsContainer,
                 {
                     html: true,
                     placement: 'bottom',
                     customClass: 'ibexa-dropdown-popover',
                     content: this.itemsPopoverContent,
-                    container: modalDialog || 'body',
+                    container: 'body',
                 },
                 { dropdown: this },
             );
@@ -478,13 +484,44 @@
                 .forEach((option) => option.addEventListener('click', this.onOptionClick, false));
 
             if (this.itemsFilterInput) {
+                const modal = this.container.closest('.modal');
+                const popupInputs = this.itemsContainer.querySelectorAll('input');
+
+                popupInputs.forEach((popupInput) =>
+                    popupInput.addEventListener(
+                        'focusin',
+                        () => {
+                            const modalInstance = bootstrap.Modal.getInstance(modal);
+
+                            if (modalInstance) {
+                                modalInstance._focustrap.deactivate();
+
+                                this.itemsFilterInput.addEventListener(
+                                    'focusout',
+                                    () => {
+                                        modalInstance._focustrap.activate();
+                                    },
+                                    { once: true },
+                                );
+                            }
+                        },
+                        false,
+                    ),
+                );
+
                 this.itemsFilterInput.addEventListener('keyup', this.filterItems, false);
                 this.itemsFilterInput.addEventListener('input', this.filterItems, false);
             }
 
             this.sourceOptionsObserver.observe(this.sourceInput, {
                 childList: true,
             });
+
+            const selectedItems = this.container.querySelectorAll(
+                '.ibexa-dropdown__selected-item:not(.ibexa-dropdown__selected-overflow-number):not(.ibexa-dropdown__selected-placeholder)',
+            );
+
+            selectedItems.forEach((selectedItem) => this.attachSelectedItemEvents(selectedItem));
         }
     }
 

src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig

@@ -25,7 +25,7 @@
         {% if multiple is defined and multiple %}
             <input type="checkbox" name="dropdown-checkbox" class="ibexa-input ibexa-input--checkbox" {% if is_selected %}checked{% endif %} />
         {% endif %}
-        {% if icon is defined %}
+        {% if icon is defined and icon != '' %}
             <svg class="ibexa-icon ibexa-icon--small {{ icon_class|default('') }}">
                 <use xlink:href="{{ ibexa_icon_path(icon) }}"></use>
             </svg>