Skip to content

Commit daa7a31

Browse files
authored
Merge pull request #2802 from Geoffrey0/search-expandable-clear
fix: allow esc and clear to work with the expandable search
2 parents 703e6a3 + 62fc717 commit daa7a31

File tree

3 files changed

+72
-3
lines changed

3 files changed

+72
-3
lines changed

src/search/search.component.spec.ts

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,59 @@ describe("Search", () => {
8585
expect(component.value).toEqual("");
8686
});
8787

88+
it("should clear the input when the clear button is clicked on the expandable component", () => {
89+
component.expandable = true;
90+
component.value = "TextToClear";
91+
fixture.detectChanges();
92+
clearButtonElement = fixture.debugElement.query(By.css("button")).nativeElement;
93+
clearButtonElement.click();
94+
fixture.detectChanges();
95+
expect(component.value).toEqual("");
96+
});
97+
98+
it("should clear the input when the escape key is pressed", () => {
99+
clearButtonElement = fixture.debugElement.query(By.css("button")).nativeElement;
100+
component.value = "TextToClear";
101+
fixture.detectChanges();
102+
expect(clearButtonElement.className.includes("cds--search-close--hidden")).toEqual(false);
103+
component.keyDown(new KeyboardEvent("keydown", {
104+
"key": "Escape"
105+
}));
106+
fixture.detectChanges();
107+
expect(component.value).toBe("");
108+
expect(clearButtonElement.className.includes("cds--search-close--hidden")).toEqual(true);
109+
});
110+
111+
it("should clear the input and keep the expanded state open when the escape key is pressed", () => {
112+
component.expandable = true;
113+
component.active = true;
114+
containerElement = fixture.debugElement.query(By.css(".cds--search")).nativeElement;
115+
component.value = "TextToClear";
116+
fixture.detectChanges();
117+
expect(containerElement.className.includes("cds--search--expanded")).toEqual(true);
118+
component.keyDown(new KeyboardEvent("keydown", {
119+
"key": "Escape"
120+
}));
121+
fixture.detectChanges();
122+
expect(component.value).toBe("");
123+
expect(containerElement.className.includes("cds--search--expanded")).toEqual(true);
124+
});
125+
126+
it("should close the expandable search component when esc is pressed when content is empty", () => {
127+
component.expandable = true;
128+
component.active = true;
129+
containerElement = fixture.debugElement.query(By.css(".cds--search")).nativeElement;
130+
component.value = "";
131+
fixture.detectChanges();
132+
expect(containerElement.className.includes("cds--search--expanded")).toEqual(true);
133+
component.keyDown(new KeyboardEvent("keydown", {
134+
"key": "Escape"
135+
}));
136+
fixture.detectChanges();
137+
expect(component.active).toEqual(false);
138+
expect(containerElement.className.includes("cds--search--expanded")).toEqual(false);
139+
});
140+
88141
it("should have dark and light theme", () => {
89142
containerElement = fixture.debugElement.query(By.css(".cds--search")).nativeElement;
90143
component.theme = "dark";

src/search/search.component.ts

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ export class Search implements ControlValueAccessor {
3737
*/
3838
static searchCount = 0;
3939

40-
@HostBinding("class.cds--form-item") get containerClass() { return !(this.toolbar || this.expandable); }
40+
@HostBinding("class.cds--form-item") get containerClass() {
41+
return !(this.toolbar || this.expandable);
42+
}
4143

4244
/**
4345
* @deprecated since v5 - Use `cdsLayer` directive instead
@@ -221,11 +223,20 @@ export class Search implements ControlValueAccessor {
221223
keyDown(event: KeyboardEvent) {
222224
if (this.toolbar || this.expandable) {
223225
if (event.key === "Escape") {
224-
this.active = false;
226+
if (this.value === "") {
227+
this.active = false;
228+
this.open.emit(this.active);
229+
}
225230
} else if (event.key === "Enter") {
226231
this.openSearch();
227232
}
228233
}
234+
235+
if (event.key === "Escape") {
236+
if (this.value !== "") {
237+
this.clearSearch();
238+
}
239+
}
229240
}
230241

231242
@HostListener("focusout", ["$event"])

src/search/search.stories.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ export default {
2020
autocomplete: "on"
2121
},
2222
argTypes: {
23+
expandable: {
24+
type: "boolean",
25+
defaultValue: false
26+
},
2327
size: {
2428
options: ["sm", "md", "lg"],
2529
control: "radio"
@@ -52,7 +56,8 @@ const Template = (args) => ({
5256
[disabled]="disabled"
5357
[size]="size"
5458
(valueChange)="valueChange($event)"
55-
(clear)="clear()">
59+
(clear)="clear()"
60+
[expandable]="expandable">
5661
</cds-search>
5762
`
5863
});

0 commit comments

Comments
 (0)