refactor: use disable-upgrade to lazy upgrade dropdown

vaadin · Mar 5, 2019 · 3ca005c · 3ca005c
1 parent e46e514
commit 3ca005c
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 68 deletions.
diff --git a/src/vaadin-combo-box-dropdown-wrapper.html b/src/vaadin-combo-box-dropdown-wrapper.html
@@ -12,51 +12,50 @@
 
 <dom-module id="vaadin-combo-box-dropdown-wrapper">
   <template>
-    <!-- Stamping the content is postponed until the combo box is opened for the first time -->
-    <template id="dropdown-template" is="dom-if">
-      <vaadin-combo-box-dropdown id="dropdown"
-          hidden="[[_hidden(_items.*, loading)]]"
-          position-target="[[positionTarget]]"
-          on-template-changed="_templateChanged"
-          on-position-changed="_setOverlayHeight"
-          theme="[[theme]]">
-        <template>
-          <style>
-            #scroller {
-              overflow: auto;
-
-              /* Fixes item background from getting on top of scrollbars on Safari */
-              transform: translate3d(0, 0, 0);
-
-              /* Enable momentum scrolling on iOS (iron-list v1.2+ no longer does it for us) */
-              -webkit-overflow-scrolling: touch;
-
-              /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
-              box-shadow: 0 0 0 white;
-            }
-          </style>
-          <div id="scroller" on-click="_stopPropagation">
-            <iron-list id="selector" role="listbox" items="[[_getItems(opened, _items)]]" scroll-target="[[_scroller]]">
-              <template>
-                <vaadin-combo-box-item
-                  on-click="_onItemClick"
-                  index="[[__requestItemByIndex(item, index)]]"
-                  item="[[item]]"
-                  label="[[getItemLabel(item, _itemLabelPath)]]"
-                  selected="[[_isItemSelected(item, _selectedItem, _itemIdPath)]]"
-                  renderer="[[renderer]]"
-                  role$="[[_getAriaRole(index)]]"
-                  aria-selected$="[[_getAriaSelected(_focusedIndex,index)]]"
-                  focused="[[_isItemFocused(_focusedIndex,index)]]"
-                  tabindex="-1"
-                  theme$="[[theme]]">
-                </vaadin-combo-box-item>
-              </template>
-            </iron-list>
-          </div>
-        </template>
-      </vaadin-combo-box-dropdown>
-    </template>
+    <vaadin-combo-box-dropdown id="dropdown"
+        hidden="[[_hidden(_items.*, loading)]]"
+        position-target="[[positionTarget]]"
+        on-template-changed="_templateChanged"
+        on-position-changed="_setOverlayHeight"
+        disable-upgrade
+        theme="[[theme]]">
+      <template>
+        <style>
+          #scroller {
+            overflow: auto;
+
+            /* Fixes item background from getting on top of scrollbars on Safari */
+            transform: translate3d(0, 0, 0);
+
+            /* Enable momentum scrolling on iOS (iron-list v1.2+ no longer does it for us) */
+            -webkit-overflow-scrolling: touch;
+
+            /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
+            box-shadow: 0 0 0 white;
+          }
+        </style>
+        <div id="scroller" on-click="_stopPropagation">
+          <iron-list id="selector" role="listbox" items="[[_getItems(opened, _items)]]" scroll-target="[[_scroller]]">
+            <template>
+              <vaadin-combo-box-item
+                on-click="_onItemClick"
+                index="[[__requestItemByIndex(item, index)]]"
+                item="[[item]]"
+                label="[[getItemLabel(item, _itemLabelPath)]]"
+                selected="[[_isItemSelected(item, _selectedItem, _itemIdPath)]]"
+                renderer="[[renderer]]"
+                role$="[[_getAriaRole(index)]]"
+                aria-selected$="[[_getAriaSelected(_focusedIndex,index)]]"
+                focused="[[_isItemFocused(_focusedIndex,index)]]"
+                tabindex="-1"
+                theme$="[[theme]]">
+              </vaadin-combo-box-item>
+            </template>
+          </iron-list>
+        </div>
+      </template>
+    </vaadin-combo-box-dropdown>
+
   </template>
 </dom-module>
 
@@ -173,7 +172,7 @@
       }
 
       _openedChanged(opened, items, loading) {
-        if (!this.$.dropdown) {
+        if (this.$.dropdown.hasAttribute('disable-upgrade')) {
           if (!opened) {
             return;
           } else {
@@ -186,11 +185,7 @@
       }
 
       _initDropdown() {
-        const template = this.shadowRoot.querySelector('#dropdown-template');
-        template.if = true;
-        template.render();
-
-        this.$.dropdown = this.shadowRoot.querySelector('#dropdown');
+        this.$.dropdown.removeAttribute('disable-upgrade');
 
         this._templateChanged();
         this._loadingChanged(this.loading);
@@ -210,7 +205,7 @@
       }
 
       _templateChanged(e) {
-        if (!this.$.dropdown) {
+        if (this.$.dropdown.hasAttribute('disable-upgrade')) {
           return;
         }
 
@@ -219,7 +214,7 @@
       }
 
       _loadingChanged(loading) {
-        if (!this.$.dropdown) {
+        if (this.$.dropdown.hasAttribute('disable-upgrade')) {
           return;
         }
 

diff --git a/src/vaadin-combo-box-dropdown.html b/src/vaadin-combo-box-dropdown.html
@@ -5,6 +5,7 @@
 -->
 
 <link rel="import" href="../../polymer/polymer-element.html">
+<link rel="import" href="../../polymer/lib/mixins/disable-upgrade-mixin.html">
 <link rel="import" href="../../vaadin-overlay/src/vaadin-overlay.html">
 <link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
 
@@ -68,7 +69,9 @@
      * @memberof Vaadin
      * @private
      */
-    class ComboBoxDropdownElement extends Polymer.mixinBehaviors(Polymer.IronResizableBehavior, Polymer.Element) {
+    class ComboBoxDropdownElement extends Polymer.DisableUpgradeMixin(
+      Polymer.mixinBehaviors(Polymer.IronResizableBehavior, Polymer.Element)) {
+
       static get is() {
         return 'vaadin-combo-box-dropdown';
       }

diff --git a/src/vaadin-combo-box-mixin.html b/src/vaadin-combo-box-mixin.html
@@ -231,7 +231,8 @@
 
       this.addEventListener('focusout', e => {
         // Fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
-        if (this.$.overlay.$.dropdown && e.relatedTarget === this.$.overlay.$.dropdown.$.overlay) {
+        const dropdown = this.$.overlay.$.dropdown;
+        if (dropdown && dropdown.$ && e.relatedTarget === dropdown.$.overlay) {
           e.composedPath()[0].focus();
           return;
         }

diff --git a/test/toggling-dropdown.html b/test/toggling-dropdown.html
@@ -354,26 +354,21 @@
       });
     });
 
-    describe('lazy attach dropdown', () => {
+    describe('lazy upgrade dropdown', () => {
 
       const getDropdown = () => combobox.$.overlay.shadowRoot.querySelector('vaadin-combo-box-dropdown');
 
-      it('should not attach dropdown initially', () => {
-        expect(getDropdown()).not.to.exist;
-      });
-
-      it('should attach dropdown on open', () => {
-        combobox.open();
-        expect(getDropdown()).to.exist;
+      it('should have disable-upgrade attribute initially', () => {
+        const dropdown = getDropdown();
+        expect(dropdown.hasAttribute('disable-upgrade')).to.be.true;
+        expect(dropdown.$).to.be.not.ok;
       });
 
-      it('should not re-create dropdown', () => {
+      it('should remove disable-upgrade attribute on open', () => {
         combobox.open();
         const dropdown = getDropdown();
-        combobox.close();
-        expect(getDropdown()).to.equal(dropdown);
-        combobox.open();
-        expect(getDropdown()).to.equal(dropdown);
+        expect(dropdown.hasAttribute('disable-upgrade')).to.be.false;
+        expect(dropdown.$).to.be.ok;
       });
     });
   });