From a5ac705b08edfb6cb1f1ad3a90e163df2a20018a Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Mon, 15 Apr 2024 13:17:11 +0300
Subject: [PATCH] fix: do not throw when opened is set before adding to DOM
 (#7335)

---
 packages/select/src/vaadin-lit-select.js        |  9 +++++++++
 packages/select/src/vaadin-select-base-mixin.js |  4 ----
 packages/select/src/vaadin-select-overlay.js    | 11 +++++++++++
 packages/select/test/pre-opened-polymer.test.js | 15 +++++++++++++++
 4 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 packages/select/test/pre-opened-polymer.test.js

diff --git a/packages/select/src/vaadin-lit-select.js b/packages/select/src/vaadin-lit-select.js
index 078c6ca40a..8407eeccc4 100644
--- a/packages/select/src/vaadin-lit-select.js
+++ b/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;
diff --git a/packages/select/src/vaadin-select-base-mixin.js b/packages/select/src/vaadin-select-base-mixin.js
index 36c5994418..a91a6d0aa0 100644
--- a/packages/select/src/vaadin-select-base-mixin.js
+++ b/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);
diff --git a/packages/select/src/vaadin-select-overlay.js b/packages/select/src/vaadin-select-overlay.js
index 433003c0ba..544fafc919 100644
--- a/packages/select/src/vaadin-select-overlay.js
+++ b/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();
 
diff --git a/packages/select/test/pre-opened-polymer.test.js b/packages/select/test/pre-opened-polymer.test.js
new file mode 100644
index 0000000000..a72525173d
--- /dev/null
+++ b/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);
+  });
+});