Break combo-box data-provider and solution

vaadin · Jul 11, 2019 · 412ecd7 · 412ecd7
1 parent 742859a
commit 412ecd7
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 5 deletions.
diff --git a/demo/dev.html b/demo/dev.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+  <title>vaadin-combo-box Examples</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../polymer/polymer.html">
+  <link rel="import" href="../../vaadin-demo-helpers/vaadin-component-demo.html">
+  <link rel="import" href="../../vaadin-demo-helpers/vaadin-demo-snippet.html">
+  <script src="../../vaadin-demo-helpers/vaadin-demo-ready-event-emitter.js"></script>
+
+  <script src="combo-box-demo.js"></script>
+
+  <link rel="import" href="../vaadin-combo-box-light.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../iron-ajax/iron-ajax.html">
+  <link rel="import" href="../../iron-icon/iron-icon.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../iron-input/iron-input.html">
+  <link rel="import" href="../../paper-input/paper-input.html">
+  <link rel="import" href="../../vaadin-button/vaadin-button.html">
+  <link rel="import" href="../vaadin-combo-box.html">
+  <link rel="import" href="../../iron-form/iron-form.html">
+
+  <custom-style>
+    <style include="vaadin-component-demo-shared-styles">
+      body, html {
+        height: 100%;
+      }
+    </style>
+  </custom-style>
+</head>
+
+<body>
+  <!-- <vaadin-combo-box label="Ordinary"></vaadin-combo-box> -->
+  <vaadin-combo-box label="Data provider"></vaadin-combo-box>
+  <vaadin-button>Break combo box</vaadin-button>
+  <span></span>
+  <script>
+    document.addEventListener('DOMContentLoaded', function(event) {
+      // const items = Array.from({length: 10000}, (v, i) => Math.random().toString(36).substring(2, 6) +
+      //   Math.random().toString(36).substring(2, 6) + ' ' + i);
+      // document.querySelector('vaadin-combo-box').items = items;
+
+      const items = Array.from({length: 10000}, (v, i) => ` ${i}`);
+
+      const combo = document.querySelector('vaadin-combo-box');
+      combo.dataProvider = function(params, callback) {
+        var index = params.page * params.pageSize;
+        setTimeout(() => {
+          callback(items.slice(index, params.pageSize + index), 10000);
+        }, 2000);
+      };
+
+      document.querySelector('vaadin-button').addEventListener('click', () => {
+        combo.open();
+        const scroller = combo.$.overlay.$.dropdown.$.overlay.$.content.shadowRoot.querySelector('#scroller');
+
+        const breakInt = setInterval(() => {
+          const random = Math.floor(Math.random() * 150000) + 3000;
+          const length = Array.from(scroller.querySelector('iron-list').children)
+            .filter(child => child.localName === 'vaadin-combo-box-item').length;
+          document.querySelector('span').textContent = `iron-list items: ${length}`;
+          if (length > 100) {
+            clearInterval(breakInt);
+          } else {
+            scroller.scroll(0, random);
+          }
+        }, 1000);
+
+        setTimeout(() => {
+          if (breakInt) {
+            clearInterval(breakInt);
+          }
+        }, 10000);
+      });
+
+      console.clear();
+    });
+  </script>
+</body>
+</html>
diff --git a/src/vaadin-combo-box-mixin.html b/src/vaadin-combo-box-mixin.html
@@ -843,11 +843,29 @@
         // which is very slow in Edge
         Polymer.Async.timeOut.after(500),
         () => {
-          this._resizeDropdown();
-          this.$.overlay.updateViewportBoundaries();
-          this.$.overlay.ensureItemsRendered();
-          this.$.overlay._selector.notifyResize();
-          Polymer.flush();
+          // Variants to solve: 
+
+          // 1 _adjustScrollPosition (_physicalTop)
+          // 2 _scrollHandler (_phyiscalTop)
+
+          // 1 _resetScrollPosition (_scrollTop)
+          // 2 _scrollHandler (_scrollTop)
+
+          // console.log('%c Problem could occur! ', 'background: #222; color: #bada55; font-size: 14px;');
+
+          // console.log(`%c Log state before change: ${this.$.overlay._selector._physicalTop}, ${this.$.overlay._selector._scrollPosition}`, `font-style: italic`);
+          this.$.overlay._selector._resetScrollPosition();
+          this.$.overlay._selector._adjustScrollPosition();
+          this.$.overlay._selector._scrollHandler();
+          // console.log(`%c Log state after change: ${this.$.overlay._selector._physicalTop}, ${this.$.overlay._selector._scrollPosition}`, `font-style: italic`);
+
+          // Problematic place
+            this._resizeDropdown();
+            this.$.overlay.updateViewportBoundaries();
+            this.$.overlay.ensureItemsRendered();
+            this.$.overlay._selector.notifyResize();
+            Polymer.flush();
+          // End
         }
       );
     }