diff --git a/src/bundle/Resources/public/js/scripts/core/dropdown.js b/src/bundle/Resources/public/js/scripts/core/dropdown.js
index 6bd6309654..6cda97fcc1 100644
--- a/src/bundle/Resources/public/js/scripts/core/dropdown.js
+++ b/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,6 +71,15 @@
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);
@@ -88,6 +87,8 @@
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,8 +452,6 @@
return;
}
- const modalDialog = this.container.closest('.modal-dialog');
-
this.itemsPopover = new DropdownPopover(
this.selectedItemsContainer,
{
@@ -453,7 +459,7 @@
placement: 'bottom',
customClass: 'ibexa-dropdown-popover',
content: this.itemsPopoverContent,
- container: modalDialog || 'body',
+ container: 'body',
},
{ dropdown: this },
);
@@ -478,6 +484,31 @@
.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);
}
@@ -485,6 +516,12 @@
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));
}
}
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig
index bc9cccefb0..ba95fb9c86 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig
@@ -25,7 +25,7 @@
{% if multiple is defined and multiple %}
{% endif %}
- {% if icon is defined %}
+ {% if icon is defined and icon != '' %}