diff --git a/src/app/shared/media/media-picker/media-picker.component.ts b/src/app/shared/media/media-picker/media-picker.component.ts index 3d647e4..4f41f21 100644 --- a/src/app/shared/media/media-picker/media-picker.component.ts +++ b/src/app/shared/media/media-picker/media-picker.component.ts @@ -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(); @@ -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 {