Merge pull request #2802 from Geoffrey0/search-expandable-clear

fix: allow esc and clear to work with the expandable search

Author: zvonimirfras

src/search/search.component.spec.ts

@@ -85,6 +85,59 @@ describe("Search", () => {
 		expect(component.value).toEqual("");
 	});
 
+	it("should clear the input when the clear button is clicked on the expandable component", () => {
+		component.expandable = true;
+		component.value = "TextToClear";
+		fixture.detectChanges();
+		clearButtonElement = fixture.debugElement.query(By.css("button")).nativeElement;
+		clearButtonElement.click();
+		fixture.detectChanges();
+		expect(component.value).toEqual("");
+	});
+
+	it("should clear the input when the escape key is pressed", () => {
+		clearButtonElement = fixture.debugElement.query(By.css("button")).nativeElement;
+		component.value = "TextToClear";
+		fixture.detectChanges();
+		expect(clearButtonElement.className.includes("cds--search-close--hidden")).toEqual(false);
+		component.keyDown(new KeyboardEvent("keydown", {
+			"key": "Escape"
+		}));
+		fixture.detectChanges();
+		expect(component.value).toBe("");
+		expect(clearButtonElement.className.includes("cds--search-close--hidden")).toEqual(true);
+	});
+
+	it("should clear the input and keep the expanded state open when the escape key is pressed", () => {
+		component.expandable = true;
+		component.active = true;
+		containerElement = fixture.debugElement.query(By.css(".cds--search")).nativeElement;
+		component.value = "TextToClear";
+		fixture.detectChanges();
+		expect(containerElement.className.includes("cds--search--expanded")).toEqual(true);
+		component.keyDown(new KeyboardEvent("keydown", {
+			"key": "Escape"
+		}));
+		fixture.detectChanges();
+		expect(component.value).toBe("");
+		expect(containerElement.className.includes("cds--search--expanded")).toEqual(true);
+	});
+
+	it("should close the expandable search component when esc is pressed when content is empty", () => {
+		component.expandable = true;
+		component.active = true;
+		containerElement = fixture.debugElement.query(By.css(".cds--search")).nativeElement;
+		component.value = "";
+		fixture.detectChanges();
+		expect(containerElement.className.includes("cds--search--expanded")).toEqual(true);
+		component.keyDown(new KeyboardEvent("keydown", {
+			"key": "Escape"
+		}));
+		fixture.detectChanges();
+		expect(component.active).toEqual(false);
+		expect(containerElement.className.includes("cds--search--expanded")).toEqual(false);
+	});
+
 	it("should have dark and light theme", () => {
 		containerElement = fixture.debugElement.query(By.css(".cds--search")).nativeElement;
 		component.theme = "dark";

src/search/search.component.ts

@@ -37,7 +37,9 @@ export class Search implements ControlValueAccessor {
 	 */
 	static searchCount = 0;
 
-	@HostBinding("class.cds--form-item") get containerClass() { return !(this.toolbar || this.expandable); }
+	@HostBinding("class.cds--form-item") get containerClass() {
+		return !(this.toolbar || this.expandable);
+	}
 
 	/**
 	 * @deprecated since v5 - Use `cdsLayer` directive instead
@@ -221,11 +223,20 @@ export class Search implements ControlValueAccessor {
 	keyDown(event: KeyboardEvent) {
 		if (this.toolbar || this.expandable) {
 			if (event.key === "Escape") {
-				this.active = false;
+				if (this.value === "") {
+					this.active = false;
+					this.open.emit(this.active);
+				}
 			} else if (event.key === "Enter") {
 				this.openSearch();
 			}
 		}
+
+		if (event.key === "Escape") {
+			if (this.value !== "") {
+				this.clearSearch();
+			}
+		}
 	}
 
 	@HostListener("focusout", ["$event"])

src/search/search.stories.ts

@@ -20,6 +20,10 @@ export default {
 		autocomplete: "on"
 	},
 	argTypes: {
+		expandable: {
+			type: "boolean",
+			defaultValue: false
+		},
 		size: {
 			options: ["sm", "md", "lg"],
 			control: "radio"
@@ -52,7 +56,8 @@ const Template = (args) => ({
 			[disabled]="disabled"
 			[size]="size"
 			(valueChange)="valueChange($event)"
-			(clear)="clear()">
+			(clear)="clear()"
+			[expandable]="expandable">
 		</cds-search>
 	`
 });