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; + } }