fix: do not throw when opened is set before adding to DOM (#7335)

packages/select/src/vaadin-lit-select.js

@@ -101,6 +101,15 @@ class Select extends SelectBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(Lit
     `;
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    const overlay = this.shadowRoot.querySelector('vaadin-select-overlay');
+    overlay.owner = this;
+    this._overlayElement = overlay;
+  }
+
   /** @private */
   _onOpenedChanged(event) {
     this.opened = event.detail.value;

packages/select/src/vaadin-select-base-mixin.js

@@ -171,10 +171,6 @@ export const SelectBaseMixin = (superClass) =>
     ready() {
       super.ready();
 
-      const overlay = this.shadowRoot.querySelector('vaadin-select-overlay');
-      overlay.owner = this;
-      this._overlayElement = overlay;
-
       this._inputContainer = this.shadowRoot.querySelector('[part~="input-field"]');
 
       this._valueButtonController = new ButtonController(this);

packages/select/src/vaadin-select-overlay.js

@@ -55,6 +55,17 @@ export class SelectOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableM
     `;
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    // When setting `opened` as an attribute, the overlay is already teleported to body
+    // by the time when `ready()` callback of the `vaadin-select` is executed by Polymer,
+    // so querySelector() would return null. So we use this workaround to set properties.
+    this.owner = this.__dataHost;
+    this.owner._overlayElement = this;
+  }
+
   requestContentUpdate() {
     super.requestContentUpdate();
 

packages/select/test/pre-opened-polymer.test.js

@@ -0,0 +1,15 @@
+import { expect } from '@esm-bundle/chai';
+import { fixtureSync } from '@vaadin/testing-helpers';
+import '../vaadin-select.js';
+
+// NOTE: this test is Polymer only as it checks for Polymer specific bug.
+// Do not import `not-animated-styles.js` in this test intentionally, as
+// otherwise the immediately closed overlay would make it false positive.
+
+describe('pre-opened', () => {
+  it('should not throw error when adding a pre-opened select', () => {
+    expect(() => {
+      fixtureSync('<vaadin-select opened></vaadin-select>');
+    }).to.not.throw(Error);
+  });
+});