Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

fix(filter-field): Fixed UX problem where text that wasn't applied to the filter would remain after losing focus. #1585

Merged
merged 1 commit into from
Sep 10, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions libs/barista-components/filter-field/src/filter-field.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,20 @@ describe('DtFilterField', () => {
});
});

describe('focus loss', () => {
it('should clear the current input value', fakeAsync(() => {
const input = fixture.debugElement.query(By.css('.dt-filter-field-input'))
.nativeElement;

filterField.focus();
typeIntoFilterElement('foo');
input.blur();
tick();

expect(input.value).toBe('');
}));
});

describe('disabled', () => {
it('should disable the input if filter field is disabled', () => {
// when
Expand Down
4 changes: 4 additions & 0 deletions libs/barista-components/filter-field/src/filter-field.ts
Original file line number Diff line number Diff line change
Expand Up @@ -530,6 +530,10 @@ export class DtFilterField<T = any>
// Assign the currently open filter field when it is focused.
if (this._isFocused) {
currentlyOpenFilterField = this;
} else {
// Clear pending input values on focus loss to communicate that the input
// wasn't applied as a filter
this._writeInputValue('');
}
});

Expand Down