diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
index 64a2fdbc5f..db105c9b96 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
@@ -2,6 +2,7 @@
disableRipple
class="adf-search-filter-chip"
[class.adf-search-toggle-chip]="(facetField.displayValue$ | async) || menuTrigger.menuOpen"
+ [disabled]="!isPopulated()"
tabIndex="0"
[matMenuTriggerFor]="menu"
(onMenuOpen)="onMenuOpen()"
@@ -18,7 +19,10 @@
{{ displayValue | translate }}
{{ 'SEARCH.FILTER.ANY' | translate }}
- keyboard_arrow_down
+ keyboard_arrow_down
+
+ remove
+
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss
new file mode 100644
index 0000000000..80c15e1755
--- /dev/null
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss
@@ -0,0 +1,5 @@
+.adf-search-filter-chip {
+ &[disabled] {
+ pointer-events: none;
+ }
+}
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.spec.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.spec.ts
index 51639c63ed..24ddc5ec06 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.spec.ts
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.spec.ts
@@ -63,4 +63,27 @@ describe('SearchFacetChipComponent', () => {
applyButton.triggerEventHandler('click', {});
expect(queryBuilder.update).toHaveBeenCalled();
});
+
+ it('should display arrow down icon and not disable the chip when items are loaded', () => {
+ component.field.buckets.items = [{ count: 1, label: 'test', filterQuery: '' }];
+ fixture.detectChanges();
+ const chip = fixture.debugElement.query(By.css('mat-chip'));
+ const icon = fixture.debugElement.query(By.css('mat-chip mat-icon')).nativeElement.innerText;
+ expect(chip.classes['mat-chip-disabled']).toBeUndefined();
+ expect(icon).toEqual('keyboard_arrow_down');
+ });
+
+ it('should display remove icon and disable facet when no items are loaded', () => {
+ const chip = fixture.debugElement.query(By.css('mat-chip'));
+ const icon = fixture.debugElement.query(By.css('mat-chip mat-icon')).nativeElement.innerText;
+ expect(chip.classes['mat-chip-disabled']).toBeTrue();
+ expect(icon).toEqual('remove');
+ });
+
+ it('should not open context menu when no items are loaded', () => {
+ spyOn(component.menuTrigger, 'openMenu');
+ const chip = fixture.debugElement.query(By.css('mat-chip')).nativeElement;
+ chip.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+ expect(component.menuTrigger.openMenu).not.toHaveBeenCalled();
+ });
});
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts
index 00e72476ca..2c40c9a8e3 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts
@@ -24,6 +24,7 @@ import { SearchFacetFieldComponent } from '../../search-facet-field/search-facet
@Component({
selector: 'adf-search-facet-chip',
templateUrl: './search-facet-chip.component.html',
+ styleUrls: ['./search-facet-chip.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class SearchFacetChipComponent {
@@ -65,10 +66,12 @@ export class SearchFacetChipComponent {
}
onEnterKeydown(): void {
- if (!this.menuTrigger.menuOpen) {
- this.menuTrigger.openMenu();
- } else {
- this.menuTrigger.closeMenu();
+ if (this.isPopulated()) {
+ if (!this.menuTrigger.menuOpen) {
+ this.menuTrigger.openMenu();
+ } else {
+ this.menuTrigger.closeMenu();
+ }
}
}
@@ -77,4 +80,8 @@ export class SearchFacetChipComponent {
this.menuTrigger.closeMenu();
}
}
+
+ isPopulated(): boolean {
+ return this.field.buckets?.items.length > 0;
+ }
}