fix(material/forms): fix choice fields with filter

gnucoop · Feb 26, 2024 · ff54e91 · ff54e91
1 parent 337f38d
commit ff54e91
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 28 deletions.
diff --git a/projects/material/forms/src/multiple-choice-field.html b/projects/material/forms/src/multiple-choice-field.html
@@ -9,7 +9,7 @@
           [enableClearOnEscapePressed]="true">
         </ngx-mat-select-search>
       </mat-option>
-      <mat-option [value]="choice.value" *ngFor="let choice of filteredChoices">
+      <mat-option [value]="choice.value" *ngFor="let choice of filteredChoices()">
         {{ choice.label | transloco }}
       </mat-option>
     </mat-select>

diff --git a/projects/material/forms/src/multiple-choice-field.ts b/projects/material/forms/src/multiple-choice-field.ts
@@ -28,7 +28,6 @@ import {
   AjfFormRendererService,
 } from '@ajf/core/forms';
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -49,13 +48,11 @@ import {AjfWarningAlertService} from './warning-alert-service';
   encapsulation: ViewEncapsulation.None,
 })
 export class AjfMultipleChoiceFieldComponent<T>
-  extends AjfFieldWithChoicesComponent<T> implements AfterViewInit, OnDestroy {
+  extends AjfFieldWithChoicesComponent<T> implements OnDestroy {
 
   readonly searchFilterCtrl = new FormControl<string>('');
   private searchFilterSub: Subscription;
 
-  filteredChoices: AjfChoice<any>[] = [];
-
   constructor(
     cdr: ChangeDetectorRef,
     service: AjfFormRendererService,
@@ -65,23 +62,18 @@ export class AjfMultipleChoiceFieldComponent<T>
     super(cdr, service, was, searchThreshold);
 
     this.searchFilterSub = this.searchFilterCtrl.valueChanges.subscribe(() => {
-      this.filterChoices();
+      cdr.markForCheck();
     });
   }
 
-  ngAfterViewInit(): void {
-    this.filteredChoices = this.instance?.filteredChoices || [];
-  }
-
-  private filterChoices() {
+  filteredChoices(): AjfChoice<any>[] {
     const choices = this.instance?.filteredChoices || [];
     let search = this.searchFilterCtrl.value;
     if (!search) {
-      this.filteredChoices = choices;
-      return;
+      return choices;
     }
     search = search.toLowerCase();
-    this.filteredChoices = choices.filter(c => c.label.toLowerCase().includes(search!));
+    return choices.filter(c => c.label.toLowerCase().includes(search!));
   }
 
   override ngOnDestroy(): void {

diff --git a/projects/material/forms/src/single-choice-field.html b/projects/material/forms/src/single-choice-field.html
@@ -9,7 +9,7 @@
           [enableClearOnEscapePressed]="true">
         </ngx-mat-select-search>
       </mat-option>
-      <mat-option [value]="choice.value" *ngFor="let choice of filteredChoices">
+      <mat-option [value]="choice.value" *ngFor="let choice of filteredChoices()">
         {{ choice.label | transloco }}
       </mat-option>
     </mat-select>

diff --git a/projects/material/forms/src/single-choice-field.ts b/projects/material/forms/src/single-choice-field.ts
@@ -28,7 +28,6 @@ import {
   AjfFormRendererService,
 } from '@ajf/core/forms';
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -49,13 +48,11 @@ import {AjfWarningAlertService} from './warning-alert-service';
   encapsulation: ViewEncapsulation.None,
 })
 export class AjfSingleChoiceFieldComponent<T>
-  extends AjfFieldWithChoicesComponent<T> implements AfterViewInit, OnDestroy {
+  extends AjfFieldWithChoicesComponent<T> implements OnDestroy {
 
   readonly searchFilterCtrl = new FormControl<string>('');
   private searchFilterSub: Subscription;
 
-  filteredChoices: AjfChoice<any>[] = [];
-
   constructor(
     cdr: ChangeDetectorRef,
     service: AjfFormRendererService,
@@ -65,23 +62,18 @@ export class AjfSingleChoiceFieldComponent<T>
     super(cdr, service, was, searchThreshold);
 
     this.searchFilterSub = this.searchFilterCtrl.valueChanges.subscribe(() => {
-      this.filterChoices();
+      cdr.markForCheck();
     });
   }
 
-  ngAfterViewInit(): void {
-    this.filteredChoices = this.instance?.filteredChoices || [];
-  }
-
-  private filterChoices() {
+  filteredChoices(): AjfChoice<any>[] {
     const choices = this.instance?.filteredChoices || [];
     let search = this.searchFilterCtrl.value;
     if (!search) {
-      this.filteredChoices = choices;
-      return;
+      return choices;
     }
     search = search.toLowerCase();
-    this.filteredChoices = choices.filter(c => c.label.toLowerCase().includes(search!));
+    return choices.filter(c => c.label.toLowerCase().includes(search!));
   }
 
   override ngOnDestroy(): void {