Skip to content

fix(template-builder): fix drag regression in template builder #35277

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

Merged
zJaaal merged 3 commits into from
Apr 9, 2026
Merged

fix(template-builder): fix drag regression in template builder #35277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b3c691d
fix(template-builder): revert identify track function and bump gridst…
zJaaal Apr 9, 2026
473cf96
fix(template-builder): guard against undefined oldChild in updateOldRows
zJaaal Apr 9, 2026
ab89c85
fix(template-builder): remove identify method, use row.id and box.id …
zJaaal Apr 9, 2026
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
2 changes: 1 addition & 1 deletion ...libs/template-builder/src/lib/components/template-builder/store/template-builder.store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -423,7 +423,7 @@ export class DotTemplateBuilderStore extends ComponentStore<DotTemplateBuilderSt

return {
...newChild, // We want the data from the backend
id: oldChild.id, // But We do not want to lose the id, because this is the way GridStack knows that nothing changed
id: oldChild?.id ?? newChild.id, // But We do not want to lose the id, because this is the way GridStack knows that nothing changed
containers: newChild.containers
};
})
Expand Down
4 changes: 2 additions & 2 deletions ...libs/template-builder/src/lib/components/template-builder/template-builder.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
[containerMap]="vm.containerMap" />
}
<div class="grid-stack flex-1">
@for (row of vm.rows; track identify($index, row)) {
@for (row of vm.rows; track row.id) {
<dotcms-template-builder-row
[attr.gs-id]="row.id"
[attr.gs-x]="row.x"
Expand All @@ -76,7 +76,7 @@
#rowElement
data-testId="row">
<div class="grid-stack-item-content grid-stack">
@for (box of row.subGridOpts?.children; track identify($index, box)) {
@for (box of row.subGridOpts?.children; track box.id) {
<div
[attr.gs-id]="box.id"
[attr.gs-auto]="true"
Expand Down
20 changes: 0 additions & 20 deletions ...b/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,26 +384,6 @@ export class TemplateBuilderComponent implements OnDestroy, OnChanges, OnInit {
this.destroy$.complete();
}

/**
* @description This method is used to identify items by id
*
* @param {number} index
* @param {GridStackWidget} w
* @return {*}
* @memberof TemplateBuilderComponent
*/
identify(index: number, w: GridStackWidget): string {
// Ensure we always return a unique string
// Combine ID with index to prevent Angular 20 NG0955 errors about duplicate keys
// This handles cases where the same ID might appear in different rows
const id = w?.id;
if (id != null && id !== '') {
return `${String(id)}-${index}`;
}
// Fallback to index if ID is not available
return `item-${index}`;
}

/**
* @description This method maintains the GridStack Model in sync with the store when you delete a column
*
Expand Down
2 changes: 1 addition & 1 deletion core-web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@
"execa": "9.6.0",
"font-awesome": "4.7.0",
"fs-extra": "11.3.2",
"gridstack": "8.1.1",
"gridstack": "8.4.0",
"htmldiff-js": "1.0.5",
"inquirer": "13.0.1",
"jstat": "1.9.6",
Expand Down
39 changes: 7 additions & 32 deletions core-web/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13696,10 +13696,10 @@ graphemer@^1.4.0:
resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==

gridstack@8.1.1:
version "8.1.1"
resolved "https://registry.npmjs.org/gridstack/-/gridstack-8.1.1.tgz#acdc910346989d2016e03763b0de55b0de0d3224"
integrity sha512-Ya7EdwAh72iug8A51hSjH8FI0v83zxPKjo9zIT5iw5Dvh3BUbgRl2hrrmGAkDfbPlfK5lgeEsQNx08UK8iNAQw==
gridstack@8.4.0:
version "8.4.0"
resolved "https://registry.npmjs.org/gridstack/-/gridstack-8.4.0.tgz#7af49159f9dc144c89a2c56246e1710406f75fcf"
integrity sha512-qLJuJrBy9bbG3hI+h2cEhiuZ51J3MyEMmv5AXg7MCFiBeG8A4HyIUytueqtD/oZcA3Pccq2Xoj7GrwpmKOS3ig==

gzip-size@^6.0.0:
version "6.0.0"
Expand Down Expand Up @@ -20336,16 +20336,7 @@ string-length@^4.0.2:
char-regex "^1.0.2"
strip-ansi "^6.0.0"

"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"

"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand Down Expand Up @@ -20462,14 +20453,7 @@ string_decoder@~1.1.1:
dependencies:
safe-buffer "~5.1.0"

"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
version "6.0.1"
resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"

strip-ansi@^6.0.0, strip-ansi@^6.0.1:
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
Expand Down Expand Up @@ -22140,7 +22124,7 @@ wordwrap@^1.0.0:
resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==

"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
Expand All @@ -22158,15 +22142,6 @@ wrap-ansi@^6.2.0:
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^8.1.0:
version "8.1.0"
resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
Expand Down
Loading