Fix for detached Node element exception (#389)

Author: twokul

addon/-private/data-view/radar/radar.js

@@ -539,6 +539,9 @@ export default class Radar {
           if (item) {
             insertRangeBefore(this._domPool, null, component.realUpperBound, component.realLowerBound);
           } else {
+            // Insert the virtual component bound back to make sure Glimmer is
+            // not confused about the state of the DOM.
+            insertRangeBefore(this._itemContainer, null, component.realUpperBound, component.realLowerBound);
             run(() => {
               virtualComponents.removeObject(component);
             });

tests/acceptance/acceptance-tests/record-array-test.js

@@ -2,6 +2,7 @@ import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 
 import { click, find, findAll, visit as newVisit } from '@ember/test-helpers';
+import scrollTo from '../../helpers/scroll-to';
 
 module('Acceptance | Record Array', function(hooks) {
   setupApplicationTest(hooks);
@@ -14,6 +15,42 @@ module('Acceptance | Record Array', function(hooks) {
     assert.equal(find('number-slide:last-of-type').textContent.replace(/\s/g, ''), '14(14)', 'correct last item rendered');
   });
 
+  test('RecordArrays update correctly after scrolling and updating items', async function(assert) {
+    await newVisit('/acceptance-tests/record-array');
+
+    assert.equal(findAll('number-slide').length, 15, 'correct number of items rendered');
+
+    await scrollTo('.table-wrapper', 0, 600);
+
+    await click('#update-items-button');
+
+    assert.equal(findAll('number-slide').length, 5, 'correct number of items rendered');
+  });
+
+  test('RecordArrays update correctly after partial update', async function(assert) {
+    await newVisit('/acceptance-tests/record-array');
+
+    assert.equal(findAll('number-slide').length, 15, 'correct number of items rendered');
+
+    await click('#partial-update-button');
+
+    assert.equal(findAll('number-slide').length, 5, 'correct number of items rendered');
+  });
+
+  test('RecordArrays update correctly after being hidden and shown', async function(assert) {
+    await newVisit('/acceptance-tests/record-array');
+
+    assert.equal(findAll('number-slide').length, 15, 'correct number of items rendered');
+
+    await click('#hide-vc-button');
+
+    assert.equal(findAll('number-slide').length, 0, 'correct number of items rendered');
+
+    await click('#show-vc-button');
+
+    assert.equal(findAll('number-slide').length, 15, 'correct number of items rendered');
+  });
+
   test('RecordArrays updates correctly after deleting items', async function(assert) {
     await newVisit('/acceptance-tests/record-array');
 

tests/dummy/app/routes/acceptance-tests/record-array/controller.js

@@ -4,15 +4,29 @@ import { inject as service } from '@ember/service';
 export default Controller.extend({
   store: service(),
   prefixed: true,
+  vcShown: true,
 
   actions: {
     updateItems() {
       this.get('store').unloadAll('number-item');
       this.get('store').query('number-item', { length: 5 });
     },
 
+    partialUpdate() {
+      let length = this.model.content.length;
+      this.set('model', this.model.toArray().removeAt(0, length - 5));
+    },
+
     showPrefixed() {
       this.toggleProperty('prefixed');
+    },
+
+    hideVC() {
+      this.set('vcShown', false);
+    },
+
+    showVC() {
+      this.set('vcShown', true);
     }
   }
 });

tests/dummy/app/routes/acceptance-tests/record-array/template.hbs

@@ -1,11 +1,16 @@
-<div class="table-wrapper dark">
-  {{#vertical-collection this.model
-    estimateHeight=50
-    bufferSize=5
-    as |item index|}}
-    {{number-slide item=item itemIndex=index prefixed=this.prefixed}}
-  {{/vertical-collection}}
-</div>
+{{#if this.vcShown}}
+  <div class="table-wrapper dark">
+    {{#vertical-collection this.model
+      estimateHeight=50
+      bufferSize=5
+      as |item index|}}
+      {{number-slide item=item itemIndex=index prefixed=this.prefixed}}
+    {{/vertical-collection}}
+  </div>
+{{/if}}
 
+<button id="hide-vc-button" {{action "hideVC"}}>Hide VC</button>
+<button id="show-vc-button" {{action "showVC"}}>Show VC</button>
+<button id="partial-update-button" {{action "partialUpdate"}}>Partial Update</button>
 <button id="update-items-button" {{action "updateItems"}}>Update items</button>
 <button id="show-prefixed-button" {{action "showPrefixed"}}>Show prefixed</button>