@vaadin/vaadin-select 21.0.3 → 21.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-select",
-  "version": "21.0.3",
+  "version": "21.0.4",
   "description": "vaadin-select",
   "main": "vaadin-select.js",
   "module": "vaadin-select.js",
@@ -28,26 +28,26 @@
     "@polymer/iron-media-query": "^3.0.0",
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/vaadin-control-state-mixin": "^21.0.3",
-    "@vaadin/vaadin-element-mixin": "^21.0.3",
-    "@vaadin/vaadin-item": "^21.0.3",
-    "@vaadin/vaadin-list-box": "^21.0.3",
-    "@vaadin/vaadin-list-mixin": "^21.0.3",
-    "@vaadin/vaadin-lumo-styles": "^21.0.3",
-    "@vaadin/vaadin-material-styles": "^21.0.3",
-    "@vaadin/vaadin-overlay": "^21.0.3",
-    "@vaadin/vaadin-text-field": "^21.0.3",
-    "@vaadin/vaadin-themable-mixin": "^21.0.3"
+    "@vaadin/vaadin-control-state-mixin": "^21.0.4",
+    "@vaadin/vaadin-element-mixin": "^21.0.4",
+    "@vaadin/vaadin-item": "^21.0.4",
+    "@vaadin/vaadin-list-box": "^21.0.4",
+    "@vaadin/vaadin-list-mixin": "^21.0.4",
+    "@vaadin/vaadin-lumo-styles": "^21.0.4",
+    "@vaadin/vaadin-material-styles": "^21.0.4",
+    "@vaadin/vaadin-overlay": "^21.0.4",
+    "@vaadin/vaadin-text-field": "^21.0.4",
+    "@vaadin/vaadin-themable-mixin": "^21.0.4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.1.5",
     "@vaadin/testing-helpers": "^0.2.1",
-    "@vaadin/vaadin-template-renderer": "^21.0.3",
+    "@vaadin/vaadin-template-renderer": "^21.0.4",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f2b0583ef776e6c52a74da7540b06bfd2d9adf1b"
+  "gitHead": "5bcf4893e594a60701c723f5c9157ad6ac694baf"
 }

package/src/vaadin-select.js

@@ -173,7 +173,7 @@ class SelectElement extends ElementMixin(
   }
 
   static get version() {
-    return '21.0.3';
+    return '21.0.4';
   }
 
   static get properties() {
@@ -378,6 +378,9 @@ class SelectElement extends ElementMixin(
   requestContentUpdate() {
     this._overlayElement.requestContentUpdate();
 
+    // Ensure menu element is set
+    this._assignMenuElement();
+
     if (this._menuElement && this._menuElement.items) {
       this._updateSelectedItem(this.value, this._menuElement.items);
     }
@@ -411,18 +414,17 @@ class SelectElement extends ElementMixin(
 
   /** @private */
   _assignMenuElement() {
-    this._menuElement = Array.from(this._overlayElement.content.children).find(
-      (element) => element.localName !== 'style'
-    );
+    const menuElement = this.__getMenuElement();
 
-    if (this._menuElement) {
-      this._menuElement.addEventListener('items-changed', () => {
-        this._items = this._menuElement.items;
+    if (menuElement && menuElement !== this.__lastMenuElement) {
+      this._menuElement = menuElement;
+      menuElement.addEventListener('items-changed', () => {
+        this._items = menuElement.items;
         this._items.forEach((item) => item.setAttribute('role', 'option'));
       });
-      this._menuElement.addEventListener('selected-changed', () => this._updateValueSlot());
-      this._menuElement.addEventListener('keydown', (e) => this._onKeyDownInside(e));
-      this._menuElement.addEventListener(
+      menuElement.addEventListener('selected-changed', () => this._updateValueSlot());
+      menuElement.addEventListener('keydown', (e) => this._onKeyDownInside(e));
+      menuElement.addEventListener(
         'click',
         () => {
           this.__userInteraction = true;
@@ -431,10 +433,19 @@ class SelectElement extends ElementMixin(
         true
       );
 
-      this._menuElement.setAttribute('role', 'listbox');
+      menuElement.setAttribute('role', 'listbox');
+
+      // Store the menu element reference
+      this.__lastMenuElement = menuElement;
     }
   }
 
+  /** @private */
+  __getMenuElement() {
+    const content = this._overlayElement && this._overlayElement.content;
+    return content ? Array.from(content.children).find((el) => el.localName !== 'style') : null;
+  }
+
   /**
    * @return {!HTMLElement}
    * @protected