fix: handle list-box set before renderer (#3412) (#3454)

vaadin · Feb 16, 2022 · a34e0ef · a34e0ef
1 parent 83820df
commit a34e0ef
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/packages/select/src/vaadin-select.js b/packages/select/src/vaadin-select.js
@@ -369,10 +369,14 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
   _assignMenuElement(menuElement) {
     if (menuElement && menuElement !== this.__lastMenuElement) {
       this._menuElement = menuElement;
+
+      // Ensure items are initialized
+      this.__initMenuItems(menuElement);
+
       menuElement.addEventListener('items-changed', () => {
-        this._items = menuElement.items;
-        this._items.forEach((item) => item.setAttribute('role', 'option'));
+        this.__initMenuItems(menuElement);
       });
+
       menuElement.addEventListener('selected-changed', () => this.__updateValueButton());
       // Use capture phase to make it possible for `<vaadin-grid-pro-edit-select>`
       // to override and handle the keydown event before the value change happens.
@@ -393,6 +397,14 @@ class Select extends DelegateFocusMixin(FieldMixin(SlotMixin(ElementMixin(Themab
     }
   }
 
+  /** @private */
+  __initMenuItems(menuElement) {
+    if (menuElement.items) {
+      this._items = menuElement.items;
+      this._items.forEach((item) => item.setAttribute('role', 'option'));
+    }
+  }
+
   /** @private */
   _valueChanged(value, oldValue) {
     this.toggleAttribute('has-value', Boolean(value));

diff --git a/packages/select/test/renderer.test.js b/packages/select/test/renderer.test.js
@@ -124,4 +124,26 @@ describe('renderer', () => {
 
     expect(overlay.content.textContent).to.equal('');
   });
+
+  describe('child list-box', () => {
+    beforeEach(async () => {
+      // Mimic the Flow component behavior
+      select.appendChild(rendererContent);
+      // Wait for list-box items to be set
+      await nextFrame();
+    });
+
+    it('should work with list-box connected before renderer is set', () => {
+      select.renderer = (root) => {
+        const listBox = Array.from(select.children).find((el) => el.tagName.toLowerCase() === 'vaadin-list-box');
+        if (listBox) {
+          if (root.firstChild) {
+            root.removeChild(root.firstChild);
+          }
+          root.appendChild(listBox);
+        }
+      };
+      expect(select._items).to.eql(rendererContent.items);
+    });
+  });
 });