Use RAF Scheduler in ember table (#470)

Addepar · Jan 3, 2018 · 0f6041d · 0f6041d
1 parent 1d5b24b
commit 0f6041d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 6 deletions.
diff --git a/addon/components/ember-table.js b/addon/components/ember-table.js
@@ -11,6 +11,7 @@ import { move } from '../utils/array';
 import { get, set } from '@ember/object';
 import { isNone } from '@ember/utils';
 import { A as emberA } from '@ember/array';
+import { scheduler, Token } from 'ember-raf-scheduler';
 
 const HEAD_ALIGN_BAR_WIDTH = 5;
 
@@ -147,6 +148,8 @@ export default class EmberTable2 extends Component {
     this.cellProxyClass = class extends CellProxy {};
 
     this.set('selectedRows', []);
+
+    this.token = new Token();
   }
 
   didInsertElement() {
@@ -159,6 +162,7 @@ export default class EmberTable2 extends Component {
   willDestroyElement() {
     this.teardownColumnFillup();
     this.teardownScrollSync();
+    this.token.cancel();
 
     super.willDestroyElement(...arguments);
   }
@@ -167,15 +171,17 @@ export default class EmberTable2 extends Component {
    * Sets up handlers to fillup the table container to its full width
    */
   setupColumnFillup() {
-    requestAnimationFrame(() => {
-      run(() => {
-        this.set('_width', this.element.offsetWidth);
-        this.fillupColumn();
-      });
-    });
+    scheduler.schedule('sync', () => {
+      this.set('_width', this.element.offsetWidth);
+      this.fillupColumn();
+    }, this.token);
 
     this._tableResizeSensor = new ResizeSensor(this.element, () => {
       run(() => {
+        if (this.get('isDestroying')) {
+          return;
+        }
+
         this.set('_width', this.element.offsetWidth);
         this.fillupColumn();
       });

diff --git a/tests/integration/components/ember-table-test.js b/tests/integration/components/ember-table-test.js
@@ -398,3 +398,38 @@ test('Swapping column event', async function(assert) {
     'Second column is swapped'
   );
 });
+
+test('Destroying table ignores resize event and does not trigger error', async function(assert) {
+  assert.expect(0);
+
+  let rowCount = 20;
+  let columnCount = 15;
+  this.set('columns', generateColumns(columnCount));
+  this.set('rows', generateRows(rowCount, columnCount));
+  this.set('showComponent', true);
+
+  this.render(hbs`
+    {{#if showComponent}}
+      <div id="container" style="height: 500px;">
+        {{#ember-table
+          columns=columns
+          rows=rows
+          estimateRowHeight=13
+          as |r|
+        }}
+
+          {{#ember-table-row
+            row=r
+
+            as |cell|
+          }}
+            {{cell.value}}
+          {{/ember-table-row}}
+        {{/ember-table}}
+      </div>
+    {{/if}}
+  `);
+
+  find('#container').style.height = '600px';
+  this.set('showComponent', false);
+});