Skip to content

Commit

Permalink
Add clear button to search field (#20332)
Browse files Browse the repository at this point in the history
  • Loading branch information
bramkragten authored Apr 2, 2024
1 parent ed1a690 commit 9bef5c2
Showing 1 changed file with 23 additions and 2 deletions.
25 changes: 23 additions & 2 deletions src/components/search-input-outlined.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import { mdiMagnify } from "@mdi/js";
import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
import { mdiClose, mdiMagnify } from "@mdi/js";
import {
CSSResultGroup,
LitElement,
TemplateResult,
css,
html,
nothing,
} from "lit";
import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { HomeAssistant } from "../types";
Expand Down Expand Up @@ -54,6 +61,15 @@ class SearchInputOutlined extends LitElement {
.path=${mdiMagnify}
></ha-svg-icon>
</slot>
${this.filter
? html`<ha-icon-button
aria-label="Clear input"
slot="trailing-icon"
@click=${this._clearSearch}
.path=${mdiClose}
>
</ha-icon-button>`
: nothing}
</ha-outlined-text-field>
`;
}
Expand All @@ -66,12 +82,17 @@ class SearchInputOutlined extends LitElement {
this._filterChanged(e.target.value);
}

private async _clearSearch() {
this._filterChanged("");
}

static get styles(): CSSResultGroup {
return css`
:host {
display: inline-flex;
/* For iOS */
z-index: 0;
--mdc-icon-button-size: 24px;
}
ha-outlined-text-field {
display: block;
Expand Down

0 comments on commit 9bef5c2

Please sign in to comment.