Skip to content

Fix for #296: Insert the virtual component bound back to DOM also for the case shouldRecycle=false #479

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Fix for #296: Insert the virtual component bound back to DOM also for the case shouldRecycle=false #479

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7b7c815
Fix race condition with shouldRecycle=false during fast scroll
johanrd Oct 4, 2025
d33b6d3
fix
johanrd Oct 4, 2025
8ca0edc
ensure minimal changes
johanrd Oct 4, 2025
76e9ada
simplify
johanrd Oct 6, 2025
ce6f221
run.join(): If already in a runloop, executes immediately in the curr…
johanrd Oct 6, 2025
72443f3
Revert "run.join(): If already in a runloop, executes immediately in …
johanrd Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 26 additions & 31 deletions vertical-collection/addon/-private/data-view/radar/radar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -585,38 +585,33 @@ export default class Radar {

// If there are any items remaining in the pool, remove them
if (_componentPool.length > 0) {
if (shouldRecycle === true) {
// Grab the DOM of the remaining components and move it to temporary node disconnected from
// the body if the item can be reused later otherwise delete the component to avoid virtual re-rendering of the
// deleted item. If we end up using these components again, we'll grab their DOM and put it back
for (let i = _componentPool.length - 1; i >= 0; i--) {
const component = _componentPool[i];
const item = objectAt(items, component.index);
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);
});
_componentPool.splice(i, 1);
}
// Grab the DOM of the remaining components and move it to temporary node disconnected from
// the body if the item can be reused later otherwise delete the component to avoid virtual re-rendering of the
// deleted item. If we end up using these components again, we'll grab their DOM and put it back
for (let i = _componentPool.length - 1; i >= 0; i--) {
const component = _componentPool[i];
const item = objectAt(items, component.index);
if (shouldRecycle === true && item) {
Copy link
Contributor

@runspired runspired Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the last PR that worked on fixing this I'd left this comment for future follow up:

I think we should follow up with a check for whether we are in the document-fragment or still in the DOM, if we are not in the fragment there's no reason to re-insert in this way.

I suspect that might still be true but I'd need to sit down and reason through the code. The worst that could happen merging this as is I believe is that we just move some DOM "in-place" which isn't too big a deal.

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);
});
_componentPool.splice(i, 1);
}
} else {
virtualComponents.removeObjects(_componentPool);
_componentPool.length = 0;
}
}

Expand Down