Assign menu and set forwardHostProps with observer

vaadin · Aug 27, 2018 · 6132f7a · 6132f7a
1 parent 1a138f4
commit 6132f7a
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/src/vaadin-dropdown-menu.html b/src/vaadin-dropdown-menu.html
@@ -324,7 +324,6 @@
         ready() {
           super.ready();
 
-          this._overlayElement = this.shadowRoot.querySelector('vaadin-dropdown-menu-overlay');
           this._valueElement = this.shadowRoot.querySelector('[part="value"]');
           this._toggleElement = this.shadowRoot.querySelector('[part="toggle-button"]');
           this._nativeInput = this.focusElement.shadowRoot.querySelector('input');
@@ -335,8 +334,17 @@
           this.focusElement.addEventListener('click', e => this.opened = !this.readonly);
           this.focusElement.addEventListener('keydown', e => this._onKeyDown(e));
 
-          const template = this.querySelector('template');
+          this._observer = new Polymer.FlattenedNodesObserver(this, info => this._setTemplateFromNodes(info.addedNodes));
+          this._observer.flush();
+        }
+
+        _setTemplateFromNodes(nodes) {
+          const template = Array.from(nodes).filter(node => node.localName && node.localName === 'template')[0] || this._contentTemplate;
           this._overlayElement.template = this._contentTemplate = template;
+          this._setForwardHostProps();
+        }
+
+        _setForwardHostProps() {
           if (this._overlayElement.content) {
             const origForwardHostProp = this._overlayElement._instance && this._overlayElement._instance.forwardHostProp;
 
@@ -586,6 +594,13 @@
         validate() {
           return !(this.invalid = !(this.disabled || !this.required || this.value));
         }
+
+        get _overlayElement() {
+          // TODO(yuriy): Ready and connected callbacks are called after property changes observers
+          // when content is rendererd with helper directive functions in lit-html, like repeat.
+          // Find a way to test it properly with other frameworks.
+          return this._savedOverlayElement || (this._savedOverlayElement = this.shadowRoot.querySelector('vaadin-dropdown-menu-overlay'));
+        }
       }
 
       customElements.define(DropdownMenuElement.is, DropdownMenuElement);