IBX-11260: Fixed dropdown lazy initialization for dynamically populated translation selects (#1834)

* Fixed dropdown lazy initialization for dynamically populated translation selects

* [Tests] Fixed failing test

---------

Co-authored-by: Tomasz Kryszan <tomasz.kryszan@ibexa.co>

Author: mikadamczyk

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

@@ -60,6 +60,12 @@
             this.itemTemplate = this.itemsListContainer.dataset.template;
             this.sourceOptionsObserver = new MutationObserver((mutationsList) => {
                 if (this.hasChangedOptions(mutationsList)) {
+                    const optionsCount = this.sourceInput.querySelectorAll('option').length;
+
+                    if (optionsCount && !this.itemsPopover) {
+                        this.initializeDropdownUI();
+                    }
+
                     this.recreateOptions();
                 }
             });
@@ -91,6 +97,7 @@
             this.itemsPopoverContent = this.itemsPopoverContent.bind(this);
             this.onSourceFocus = this.onSourceFocus.bind(this);
             this.onSourceBlur = this.onSourceBlur.bind(this);
+            this.initializeDropdownUI = this.initializeDropdownUI.bind(this);
 
             ibexa.helpers.objectInstances.setInstance(this.container, this);
         }
@@ -530,21 +537,8 @@
             this.selectionTogglerBtn.innerHTML = label;
         }
 
-        init() {
-            if (this.container.dataset.initialized) {
-                console.warn('Dropdown has already been initialized!');
-
-                return;
-            }
-
-            this.container.dataset.initialized = true;
-
-            this.sourceInput.addEventListener('focus', this.onSourceFocus, false);
-            this.sourceInput.addEventListener('blur', this.onSourceBlur, false);
-
-            const optionsCount = this.container.querySelectorAll('.ibexa-dropdown__source option').length;
-
-            if (!optionsCount) {
+        initializeDropdownUI() {
+            if (this.itemsPopover) {
                 return;
             }
 
@@ -610,7 +604,19 @@
                 this.itemsFilterInput.addEventListener('keyup', this.filterItems, false);
                 this.itemsFilterInput.addEventListener('input', this.filterItems, false);
             }
+        }
 
+        init() {
+            if (this.container.dataset.initialized) {
+                console.warn('Dropdown has already been initialized!');
+
+                return;
+            }
+
+            this.container.dataset.initialized = true;
+
+            this.sourceInput.addEventListener('focus', this.onSourceFocus, false);
+            this.sourceInput.addEventListener('blur', this.onSourceBlur, false);
             this.sourceOptionsObserver.observe(this.sourceInput, {
                 childList: true,
             });
@@ -620,6 +626,14 @@
             });
             this.resizeObserver.observe(this.container);
 
+            const optionsCount = this.container.querySelectorAll('.ibexa-dropdown__source option').length;
+
+            if (!optionsCount) {
+                return;
+            }
+
+            this.initializeDropdownUI();
+
             const selectedItems = this.container.querySelectorAll(
                 '.ibexa-dropdown__selected-item:not(.ibexa-dropdown__selected-overflow-number):not(.ibexa-dropdown__selected-placeholder)',
             );

tests/lib/Form/Data/Role/RoleAssignmentCreateDataValidationTest.php

@@ -54,11 +54,6 @@ public static function getDataForTestFormSubmitValidation(): iterable
                     ['{{ value }}' => 'foo'],
                     'children[limitation_type]'
                 ),
-                new FormErrorDataTestWrapper(
-                    'The selected choice is invalid.',
-                    ['{{ value }}' => 'foo'],
-                    'children[limitation_type]'
-                ),
             ],
         ];