From 614bd2f45142a867b65aada66ed0c94f701a6457 Mon Sep 17 00:00:00 2001 From: Zack Barett Date: Mon, 24 Jan 2022 11:14:29 -0600 Subject: [PATCH] Fix Quickbar for Safari - Change to MWC Textfield (#11414) --- src/components/ha-textfield.ts | 25 ++++++++++++++++++++++ src/dialogs/quick-bar/ha-quick-bar.ts | 30 +++++++++++++++------------ 2 files changed, 42 insertions(+), 13 deletions(-) create mode 100644 src/components/ha-textfield.ts 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`