sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(footer): stop generating collision-prone social-link ids, fragile track key

Browse Source 
createSocialLinkRow derived the new id from the current array length
(social-${length+1}). Add/remove/add cycles reliably reproduce a duplicate
id: add,add -> social-1/social-2; remove social-1 -> array length 1; add
-> social-2 again, colliding with the surviving row. footer.component.html
tracks footer nav items by id (@for ... track item.id), so a duplicate id
there corrupts Angular's DOM reuse on the public storefront footer.

Also switched the payment-icon @for from track icon.src to track $index -
two icon rows sharing a src (most commonly two blank ones) hit the same bug.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-17 17:52:43 +04:00
parent 9e44215dd5
commit b05278c061
2 changed files with 2 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/footer/footer.component.html
View File

@@ -28,7 +28,7 @@
<div class="app-footer__group"> <div class="app-footer__group">
<h4>{{ 'footer.payment' | translate }}</h4> <h4>{{ 'footer.payment' | translate }}</h4>
<div class="app-footer__payments"> <div class="app-footer__payments">
@for (icon of paymentIcons(); track icon.src) { @for (icon of paymentIcons(); track $index) {
<img [src]="icon.src" [alt]="icon.alt" loading="lazy" [width]="icon.width" [height]="icon.height" /> <img [src]="icon.src" [alt]="icon.alt" loading="lazy" [width]="icon.width" [height]="icon.height" />
} }
</div> </div>

5
src/app/features/project-editor/sections/footer-section.component.ts
View File

@@ -46,10 +46,7 @@ export class ProjectEditorFooterSectionComponent {
readonly createPaymentIconRow = (): FooterPaymentIconConfig => ({ src: '', alt: '' }); readonly createPaymentIconRow = (): FooterPaymentIconConfig => ({ src: '', alt: '' });
readonly createSocialLinkRow = (): FooterSocialLinkConfig => { readonly createSocialLinkRow = (): FooterSocialLinkConfig => ({ id: `social-${Date.now()}`, label: '', url: '' });
const index = (this.bootstrap()?.footer?.socialLinks?.length ?? 0) + 1;
return { id: `social-${index}`, label: '', url: '' };
};
updateCompanyName(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, companyName: value } })); } updateCompanyName(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, companyName: value } })); }
updateAddress(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, address: { ...current.company.address, street: value } } })); } updateAddress(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, address: { ...current.company.address, street: value } } })); }