[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 }}
</ng-container>
<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">
</adf-search-facet-tabbed-content>
</ng-container>

View File

@@ -142,6 +142,18 @@ describe('SearchFacetChipTabbedComponent', () => {
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 () => {
const displayValue = 'field_LABEL: test, test2';
const chip = await loader.getHarness(MatChipHarness);

View File

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