Fixing virtual scrollbar flip flopping. Closes #552.

When using a virtual scrollbar, the table body was rerendered as the virtual scrollbar flag was settling.
adopted-ember-addons · Jan 23, 2019 · 4f33a20 · 4f33a20
1 parent d4673d8
commit 4f33a20
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 43 deletions.
diff --git a/addon/components/lt-body.js b/addon/components/lt-body.js
@@ -220,6 +220,14 @@ export default Component.extend({
    */
   useVirtualScrollbar: false,
 
+  /**
+   * @property virtualScrollbarSettled
+   * @type {Boolean}
+   * @default false
+   * @private
+   */
+  virtualScrollbarSettled: false,
+
   /**
    * Set this property to scroll to a specific px offset.
    *
@@ -354,7 +362,10 @@ export default Component.extend({
 
   _setupVirtualScrollbar() {
     let { fixedHeader, fixedFooter } = this.get('sharedOptions');
-    this.set('useVirtualScrollbar', fixedHeader || fixedFooter);
+    this.setProperties({
+      useVirtualScrollbar: fixedHeader || fixedFooter,
+      virtualScrollbarSettled: true
+    });
   },
 
   onRowsChange: observer('rows.[]', function() {

diff --git a/addon/templates/components/lt-body.hbs b/addon/templates/components/lt-body.hbs
@@ -8,59 +8,62 @@
     {{#lt-scrollable
       tagName=''
       virtualScrollbar=useVirtualScrollbar
+      virtualScrollbarSettled=virtualScrollbarSettled
       autoHide=autoHideScrollbar
       scrollTo=targetScrollOffset
       onScrollY=(action 'onScroll')
     }}
       <div id={{concat tableId '_inline_head'}} class="lt-inline lt-head"></div>
 
-      <table class={{tableClassNames}}>
-        <tbody class="lt-body">
-        {{#if enableScaffolding}}
-          <tr class="lt-scaffolding-row">
-            {{#each columns as |column|}}
-              <td style={{html-safe (if column.width (concat 'width: ' column.width))}} class="lt-scaffolding"></td>
-            {{/each}}
-          </tr>
-        {{/if}}
+      {{#if virtualScrollbarSettled}}
+        <table class={{tableClassNames}}>
+          <tbody class="lt-body">
+          {{#if enableScaffolding}}
+            <tr class="lt-scaffolding-row">
+              {{#each columns as |column|}}
+                <td style={{html-safe (if column.width (concat 'width: ' column.width))}} class="lt-scaffolding"></td>
+              {{/each}}
+            </tr>
+          {{/if}}
 
-        {{#if overwrite}}
-          {{yield columns rows}}
-        {{else}}
-          {{#each rows as |row|}}
-            {{lt.row row columns
-                     data-row-id=row.rowId
-                     table=table
-                     tableActions=tableActions
-                     extra=extra
-                     enableScaffolding=enableScaffolding
-                     canExpand=canExpand
-                     canSelect=canSelect
-                     click=(action 'onRowClick' row)
-                     doubleClick=(action 'onRowDoubleClick' row)}}
+          {{#if overwrite}}
+            {{yield columns rows}}
+          {{else}}
+            {{#each rows as |row|}}
+              {{lt.row row columns
+                      data-row-id=row.rowId
+                      table=table
+                      tableActions=tableActions
+                      extra=extra
+                      enableScaffolding=enableScaffolding
+                      canExpand=canExpand
+                      canSelect=canSelect
+                      click=(action 'onRowClick' row)
+                      doubleClick=(action 'onRowDoubleClick' row)}}
+
+              {{yield (hash
+                        expanded-row=(component lt.spanned-row classes='lt-expanded-row' colspan=colspan yield=row visible=row.expanded)
+                        loader=(component lt.spanned-row visible=false)
+                        no-data=(component lt.spanned-row visible=false)
+                      ) rows}}
+            {{/each}}
 
             {{yield (hash
-                      expanded-row=(component lt.spanned-row classes='lt-expanded-row' colspan=colspan yield=row visible=row.expanded)
-                      loader=(component lt.spanned-row visible=false)
-                      no-data=(component lt.spanned-row visible=false)
+                      loader=(component lt.spanned-row classes='lt-is-loading' colspan=colspan)
+                      no-data=(component lt.spanned-row classes='lt-no-data' colspan=colspan)
+                      expanded-row=(component lt.spanned-row visible=false)
                     ) rows}}
-          {{/each}}
+          {{/if}}
+          </tbody>
+        </table>
 
-          {{yield (hash
-                    loader=(component lt.spanned-row classes='lt-is-loading' colspan=colspan)
-                    no-data=(component lt.spanned-row classes='lt-no-data' colspan=colspan)
-                    expanded-row=(component lt.spanned-row visible=false)
-                  ) rows}}
+        {{#if onScrolledToBottom}}
+          {{lt.infinity
+            rows=rows
+            inViewport=(action "inViewport")
+            exitViewport=(action "exitViewport")
+            scrollableContent=".lt-scrollable"}}
         {{/if}}
-        </tbody>
-      </table>
-
-      {{#if onScrolledToBottom}}
-        {{lt.infinity
-          rows=rows
-          inViewport=(action "inViewport")
-          exitViewport=(action "exitViewport")
-          scrollableContent=".lt-scrollable"}}
       {{/if}}
 
       <div id={{concat tableId '_inline_foot'}} class="lt-inline lt-foot"></div>

diff --git a/addon/templates/components/lt-scrollable.hbs b/addon/templates/components/lt-scrollable.hbs
@@ -1,4 +1,4 @@
-{{#if virtualScrollbar}}
+{{#if (and virtualScrollbarSettled virtualScrollbar)}}
   {{#ember-scrollable
     classNames='lt-scrollable'
     autoHide=autoHide

diff --git a/tests/integration/components/light-table-test.js b/tests/integration/components/light-table-test.js
@@ -260,4 +260,85 @@ module('Integration | Component | light table', function(hooks) {
       await click(element);
     }
   });
+
+  test('table body renders once when header is rendered in place', async function(assert) {
+    assert.expect(1);
+
+    this.owner.register('component:custom-row', RowComponent.extend({
+      didInsertElement() {
+        this._super(...arguments);
+        assert.ok(true, 'row is rendered once');
+      }
+    }));
+
+    this.set('table', new Table(Columns, this.server.createList('user', 1)));
+
+    await render(hbs`
+      {{#light-table table height='500px' id='lightTable' as |t|}}
+        {{t.head}}
+        {{t.body rowComponent=(component "custom-row")}}
+      {{/light-table}}
+    `);
+  });
+
+  test('table body renders once when header is fixed', async function(assert) {
+    assert.expect(1);
+
+    this.owner.register('component:custom-row', RowComponent.extend({
+      didInsertElement() {
+        this._super(...arguments);
+        assert.ok(true, 'row is rendered once');
+      }
+    }));
+
+    this.set('table', new Table(Columns, this.server.createList('user', 1)));
+
+    await render(hbs`
+      {{#light-table table height='500px' id='lightTable' as |t|}}
+        {{t.head fixed=true}}
+        {{t.body rowComponent=(component "custom-row")}}
+      {{/light-table}}
+    `);
+  });
+
+  test('table body renders once when footer is rendered in place', async function(assert) {
+    assert.expect(1);
+
+    this.owner.register('component:custom-row', RowComponent.extend({
+      didInsertElement() {
+        this._super(...arguments);
+        assert.ok(true, 'row is rendered once');
+      }
+    }));
+
+    this.set('table', new Table(Columns, this.server.createList('user', 1)));
+
+    await render(hbs`
+      {{#light-table table height='500px' id='lightTable' as |t|}}
+        {{t.body rowComponent=(component "custom-row")}}
+        {{t.foot}}
+      {{/light-table}}
+    `);
+  });
+
+  test('table body renders once when footer is fixed', async function(assert) {
+    assert.expect(1);
+
+    this.owner.register('component:custom-row', RowComponent.extend({
+      didInsertElement() {
+        this._super(...arguments);
+        assert.ok(true, 'row is rendered once');
+      }
+    }));
+
+    this.set('table', new Table(Columns, this.server.createList('user', 1)));
+
+    await render(hbs`
+      {{#light-table table height='500px' id='lightTable' as |t|}}
+        {{t.body rowComponent=(component "custom-row")}}
+        {{t.foot fixed=true}}
+      {{/light-table}}
+    `);
+  });
+
 });