fix(media-picker): reset shared filter state on open instead of eager unconditional load
Some checks failed
Architecture Governance / architecture (push) Has been cancelled

MediaLibraryFacade is a root-provided singleton shared by every
app-media-picker instance on a page (branding alone renders 4; static-pages
with N pages renders 2N). ngOnInit called facade.load() unconditionally on
mount regardless of whether the dialog was ever opened, and search/folder/
page filters set in one dialog leaked into whichever picker instance was
opened next, since they all read/write the same signals.

Replaced ngOnInit with an effect() that resets search/folder/page and loads
only when this instance's own  input becomes true. Verified live:
searched in one field's picker, closed it, opened a different field's
picker on the same page - search is now reset to empty (previously it
would've carried over 'leftover-search-term').

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-17 19:07:51 +04:00
parent 76e9689e11
commit c069cafe45

View File

@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild, inject, input, output } from '@angular/core';
import { ChangeDetectionStrategy, Component, ElementRef, ViewChild, effect, inject, input, output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { MediaLibraryFacade } from '../../../features/backoffice/media/facade/media-library.facade';
@@ -31,7 +31,7 @@ const PAGE_SIZE = 24;
styleUrl: './media-picker.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MediaPickerComponent implements OnInit {
export class MediaPickerComponent {
readonly open = input(false);
readonly selected = output<MediaAsset>();
@@ -43,8 +43,23 @@ export class MediaPickerComponent implements OnInit {
protected readonly totalPages = () => Math.max(1, Math.ceil(this.facade.total() / PAGE_SIZE));
ngOnInit(): void {
void this.facade.load();
constructor() {
// MediaLibraryFacade is a root-provided singleton shared by every
// app-media-picker instance on the page (a form with several image
// fields renders one instance each). Loading unconditionally in
// ngOnInit meant every instance fetched on mount regardless of whether
// its dialog was ever opened, and search/folder/page state from one
// dialog leaked into whichever picker was opened next. Reset the
// shared filters and (re)load only when this instance's dialog
// actually opens.
effect(() => {
if (this.open()) {
this.facade.search.set('');
this.facade.folder.set(null);
this.facade.page.set(1);
void this.facade.load();
}
});
}
protected triggerFileInput(): void {