diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts new file mode 100644 index 0000000000..55daec0349 --- /dev/null +++ b/src/components/ha-textfield.ts @@ -0,0 +1,25 @@ +import { TextField } from "@material/mwc-textfield"; +import { TemplateResult, html } from "lit"; +import { customElement } from "lit/decorators"; + +@customElement("ha-textfield") +export class HaTextField extends TextField { + override renderIcon(_icon: string, isTrailingIcon = false): TemplateResult { + const type = isTrailingIcon ? "trailing" : "leading"; + + return html` + + + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-textfield": HaTextField; + } +} diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts index 6ae9e25264..55b535a847 100644 --- a/src/dialogs/quick-bar/ha-quick-bar.ts +++ b/src/dialogs/quick-bar/ha-quick-bar.ts @@ -1,3 +1,4 @@ +import "../../components/ha-textfield"; import { Layout1d, scroll } from "@lit-labs/virtualizer"; import "@material/mwc-list/mwc-list"; import type { List } from "@material/mwc-list/mwc-list"; @@ -98,7 +99,7 @@ export class QuickBar extends LitElement { @state() private _hint?: string; - @query("paper-input", false) private _filterInputField?: HTMLElement; + @query("ha-textfield", false) private _filterInputField?: HTMLElement; private _focusSet = false; @@ -143,28 +144,32 @@ export class QuickBar extends LitElement { hideActions >
- ${this._search}` : this._search} + .icon=${true} + .iconTrailing=${this._search !== undefined} + @input=${this._handleSearchChange} @keydown=${this._handleInputKeyDown} @focus=${this._setFocusFirstListItem} > ${this._commandMode ? html` ` : html` @@ -172,13 +177,13 @@ export class QuickBar extends LitElement { ${this._search && html` `} - + ${this._narrow ? html`