fix: fix sync element

packages/infinitegrid/package.json

@@ -122,7 +122,7 @@
  "@cfcs/core": "^0.0.5",
  "@egjs/children-differ": "^1.0.1",
  "@egjs/component": "^3.0.0",
- "@egjs/grid": "^1.14.1",
+ "@egjs/grid": "^1.14.2",
  "@egjs/list-differ": "^1.0.0"
  }
 }

packages/infinitegrid/src/GroupManager.ts

@@ -644,6 +644,9 @@ export class GroupManager extends Grid<GroupManagerOptions> {
  if (info.groupKey != null) {
  prevItem.groupKey = info.groupKey!;
  }
+ if (info.element) {
+ prevItem.element = info.element;
+ }
  nextItemKeys[key] = prevItem;
  }
  });
@@ -664,6 +667,9 @@ export class GroupManager extends Grid<GroupManagerOptions> {
  if (info.data) {
  item.data = info.data;
  }
+ if (info.element) {
+ item.element = info.element;
+ }
  } else {
  item = new InfiniteGridItem(horizontal, {
  ...info,

packages/infinitegrid/src/InfiniteGrid.ts

@@ -693,12 +693,20 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
  this.setCursors(e.nextStartCursor, e.nextEndCursor);
  }
  private _onRendererUpdated = (e: OnRendererUpdated<GridRendererItem>): void => {
+ const renderedItems = e.items;
+
+ renderedItems.forEach((item) => {
+ // set grid element
+ const gridItem = item.orgItem;
+
+ gridItem.element = item.element as HTMLElement;
+ });
+
  if (!e.isChanged) {
  this._checkEndLoading();
  this._scroll();
  return;
  }
- const renderedItems = e.items;
 
  const {
  added,
@@ -715,12 +723,6 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
  }
  });
 
- renderedItems.forEach((item) => {
- // set grid element
- const gridItem = item.orgItem;
-
- gridItem.element = item.element as HTMLElement;
- });
 
  const horizontal = this.options.horizontal;
  const addedItems = added.map((index) => {

packages/infinitegrid/test/unit/cfcs.spec.ts

@@ -133,6 +133,55 @@ describe("test cfcs", () => {
  expect(item.element).to.be.equals(item2.element);
  });
  });
+ it("should check if the element is updated even if the key is the same", async () => {
+ // Given
+ const firstItems = [0, 1, 2, 3, 4, 5].map((i) => {
+ return {
+ key: i,
+ element: document.createElement("div"),
+ };
+ });
+ container!.innerHTML = `
+ <div class="wrapper" style="width: 100%; height: 500px;"></div>
+ `;
+ const wrapper = container!.querySelector<HTMLElement>(".wrapper")!;
+ ig = new InfiniteGrid<InfiniteGridOptions>(wrapper, {
+ gridConstructor: SampleGrid,
+ container: true,
+ });
+
+ // first render
+ ig.syncItems(firstItems);
+
+ await waitEvent(ig!, "renderComplete");
+
+ // When
+ // second render with same key
+ const nextItems = [0, 1, 2, 3, 4, 5].map((i) => {
+ return {
+ key: i,
+ element: document.createElement("li"),
+ };
+ });
+ ig.getContainerElement().innerHTML = "";
+
+ nextItems.forEach((item) => {
+ ig!.getContainerElement().appendChild(item.element);
+ });
+ ig.syncItems(nextItems);
+ ig.renderItems();
+
+ await waitEvent(ig!, "renderComplete");
+
+ const renderingItems2 = ig.getRenderingItems();
+
+ // Then
+ nextItems.forEach((item, i) => {
+ const item2 = renderingItems2[i];
+
+ expect(item.element).to.be.equals(item2.element);
+ });
+ });
  it("should check if rendering items exists with placeholders", async () => {
  // Given
  container!.innerHTML = `

yarn.lock

@@ -2495,10 +2495,10 @@
  "@egjs/imready" "^1.3.1"
  "@egjs/list-differ" "^1.0.1"
 
-"@egjs/grid@^1.14.1":
- version "1.14.1"
- resolved "https://registry.npmjs.org/@egjs/grid/-/grid-1.14.1.tgz#83ca3f16b86b6f89ec33dd424d8341831e210792"
- integrity sha512-xICx7COEqVdcfsEYnh22otobqOBqb/69NooDF6W4Tg35SS3Tans9yrgv0a4J6/dEykVcH6kdDEy53gPxl9wIUQ==
+"@egjs/grid@^1.14.2":
+ version "1.14.2"
+ resolved "https://registry.npmjs.org/@egjs/grid/-/grid-1.14.2.tgz#b92c91298a808c7549219904ed2396361c4cc1b8"
+ integrity sha512-MOIL6zdFmEFYVmlsrPr8eNPybDZqRKzJo1sceFiamAvxWJ+5yG17tVRP9zMSeXogjsShWhNUKqoPOUC4rClFAQ==
  dependencies:
  "@egjs/children-differ" "^1.0.1"
  "@egjs/component" "^3.0.0"