diff --git a/components/filter-field/src/filter-field.scss b/components/filter-field/src/filter-field.scss
index 5ff0b168ef..83f92ae667 100644
--- a/components/filter-field/src/filter-field.scss
+++ b/components/filter-field/src/filter-field.scss
@@ -110,6 +110,11 @@ button.dt-filter-field-clear-all-button {
margin-left: 8px;
}
+button.dt-filter-field-clear-all-button-hidden {
+ visibility: hidden;
+ position: absolute;
+}
+
// We need to double the class to get a better specificity
// than the original autocomplete panel selector
::ng-deep .dt-autocomplete-panel.dt-filter-field-panel.dt-filter-field-panel {
diff --git a/components/filter-field/src/filter-field.spec.ts b/components/filter-field/src/filter-field.spec.ts
index 9503a859de..23f9a1abf0 100644
--- a/components/filter-field/src/filter-field.spec.ts
+++ b/components/filter-field/src/filter-field.spec.ts
@@ -1611,7 +1611,8 @@ describe('DtFilterField', () => {
});
it('should not display the clear all button if no filters are set', () => {
- expect(getClearAll(fixture)).toBeNull();
+ // Check if the clear all is initially not visible.
+ expect(isClearAllVisible(fixture)).toBe(false);
const autocompleteFilter = [
TEST_DATA_EDITMODE.autocomplete[0],
@@ -1622,7 +1623,8 @@ describe('DtFilterField', () => {
filterField.filters = [autocompleteFilter];
fixture.detectChanges();
- expect(getClearAll(fixture)).not.toBeNull();
+ // After setting the filters, there should be a clear all button visible.
+ expect(isClearAllVisible(fixture)).toBe(true);
});
// the user is in the edit mode of a filter
@@ -1641,7 +1643,7 @@ describe('DtFilterField', () => {
zone.simulateZoneExit();
fixture.detectChanges();
- expect(getClearAll(fixture)).toBeNull();
+ expect(isClearAllVisible(fixture)).toBe(false);
});
// the user is in the edit mode of a filter
@@ -1664,7 +1666,7 @@ describe('DtFilterField', () => {
const autOption = options[0];
autOption.click();
- expect(getClearAll(fixture)).toBeNull();
+ expect(isClearAllVisible(fixture)).toBe(false);
});
it('should not display the clear all button if no label is provided', () => {
@@ -1678,7 +1680,7 @@ describe('DtFilterField', () => {
fixture.componentInstance.clearAllLabel = '';
fixture.detectChanges();
- expect(getClearAll(fixture)).toBeNull();
+ expect(isClearAllVisible(fixture)).toBe(false);
});
it('should reset the entire filter field', () => {
@@ -2094,13 +2096,12 @@ function getTagButtons(
return { label, deleteButton };
}
-// tslint:disable-next-line:no-any
function getInput(fixture: ComponentFixture
): HTMLInputElement {
return fixture.debugElement.query(By.css('.dt-filter-field-input'))
.nativeElement;
}
-// tslint:disable-next-line:no-any
+/** Get the clearAll button. */
function getClearAll(fixture: ComponentFixture): HTMLButtonElement | null {
const dbgEl = fixture.debugElement.query(
By.css('.dt-filter-field-clear-all-button'),
@@ -2108,6 +2109,15 @@ function getClearAll(fixture: ComponentFixture): HTMLButtonElement | null {
return dbgEl ? dbgEl.nativeElement : null;
}
+/** Get the clearAll button and evaluate if it is visible or not. */
+function isClearAllVisible(fixture: ComponentFixture): boolean {
+ const clearAll = getClearAll(fixture);
+ return (
+ clearAll !== null &&
+ !clearAll.classList.contains('dt-filter-field-clear-all-button-hidden')
+ );
+}
+
@Component({
selector: 'test-app',
template: `