[ACS-7474] - fix 'Expression has changed' Angular error in People facet (#9681)

This commit is contained in:
dominikiwanekhyland
2024-05-21 14:28:57 +02:00
committed by GitHub
parent e3c19d3787
commit 5218e7e928
3 changed files with 23 additions and 7 deletions

View File

@@ -34,7 +34,7 @@
{{ tabbedFacet.label | translate }} {{ tabbedFacet.label | translate }}
</ng-container> </ng-container>
<ng-container ngProjectAs="filter-content"> <ng-container ngProjectAs="filter-content">
<adf-search-facet-tabbed-content [tabbedFacet]="tabbedFacet" (isPopulated)="isPopulated = $event" <adf-search-facet-tabbed-content [tabbedFacet]="tabbedFacet" (isPopulated)="onIsPopulatedEventChange($event)"
[onReset$]="reset$" [onApply$]="apply$" (displayValue$)="displayValue = $event"> [onReset$]="reset$" [onApply$]="apply$" (displayValue$)="displayValue = $event">
</adf-search-facet-tabbed-content> </adf-search-facet-tabbed-content>
</ng-container> </ng-container>

View File

@@ -142,6 +142,18 @@ describe('SearchFacetChipTabbedComponent', () => {
expect(await icon.getName()).toBe('keyboard_arrow_up'); expect(await icon.getName()).toBe('keyboard_arrow_up');
}); });
it('should update isPopulated and call detectChanges on ChangeDetectorRef', () => {
spyOn(component['changeDetectorRef'], 'detectChanges').and.callThrough();
component.onIsPopulatedEventChange(true);
expect(component.isPopulated).toBe(true);
expect(component['changeDetectorRef'].detectChanges).toHaveBeenCalled();
component.onIsPopulatedEventChange(false);
expect(component.isPopulated).toBe(false);
expect(component['changeDetectorRef'].detectChanges).toHaveBeenCalledTimes(2);
});
it('should update display value when new displayValue$ emitted', async () => { it('should update display value when new displayValue$ emitted', async () => {
const displayValue = 'field_LABEL: test, test2'; const displayValue = 'field_LABEL: test, test2';
const chip = await loader.getHarness(MatChipHarness); const chip = await loader.getHarness(MatChipHarness);

View File

@@ -15,17 +15,17 @@
* limitations under the License. * limitations under the License.
*/ */
import { Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core'; import { ChangeDetectorRef, Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';
import { ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y'; import { ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
import { MatMenuTrigger } from '@angular/material/menu'; import { MatMenuTrigger } from '@angular/material/menu';
import { TabbedFacetField } from '../../../models/tabbed-facet-field.interface'; import { TabbedFacetField } from '../../../models/tabbed-facet-field.interface';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
@Component({ @Component({
selector: 'adf-search-facet-chip-tabbed', selector: 'adf-search-facet-chip-tabbed',
templateUrl: './search-facet-chip-tabbed.component.html', templateUrl: './search-facet-chip-tabbed.component.html',
styleUrls: ['./search-facet-chip-tabbed.component.scss'], styleUrls: ['./search-facet-chip-tabbed.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class SearchFacetChipTabbedComponent { export class SearchFacetChipTabbedComponent {
@Input() @Input()
@@ -47,7 +47,7 @@ export class SearchFacetChipTabbedComponent {
chipIcon = 'keyboard_arrow_down'; chipIcon = 'keyboard_arrow_down';
isPopulated = false; isPopulated = false;
constructor(private focusTrapFactory: ConfigurableFocusTrapFactory) {} constructor(private focusTrapFactory: ConfigurableFocusTrapFactory, private changeDetectorRef: ChangeDetectorRef) {}
onMenuOpen() { onMenuOpen() {
if (this.menuContainer && !this.focusTrap) { if (this.menuContainer && !this.focusTrap) {
@@ -87,4 +87,8 @@ export class SearchFacetChipTabbedComponent {
this.menuTrigger.closeMenu(); this.menuTrigger.closeMenu();
} }
} }
onIsPopulatedEventChange(isPopulated: boolean): void {
this.isPopulated = isPopulated;
this.changeDetectorRef.detectChanges();
}
} }