diff --git a/src/common/search/search-input.ts b/src/common/search/search-input.ts
index 08084af98a..f9806d60e0 100644
--- a/src/common/search/search-input.ts
+++ b/src/common/search/search-input.ts
@@ -1,17 +1,10 @@
import { mdiClose, mdiMagnify } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
- css,
- CSSResultGroup,
- html,
- LitElement,
- PropertyValues,
- TemplateResult,
-} from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators";
import "../../components/ha-icon-button";
import "../../components/ha-svg-icon";
+import "../../components/ha-textfield";
+import type { HaTextField } from "../../components/ha-textfield";
import { HomeAssistant } from "../../types";
import { fireEvent } from "../dom/fire_event";
@@ -21,12 +14,6 @@ class SearchInput extends LitElement {
@property() public filter?: string;
- @property({ type: Boolean, attribute: "no-label-float" })
- public noLabelFloat? = false;
-
- @property({ type: Boolean, attribute: "no-underline" })
- public noUnderline = false;
-
@property({ type: Boolean })
public autofocus = false;
@@ -34,49 +21,42 @@ class SearchInput extends LitElement {
public label?: string;
public focus() {
- this.shadowRoot!.querySelector("paper-input")!.focus();
+ this._input?.focus();
}
- @query("paper-input", true) private _input!: PaperInputElement;
+ @query("ha-textfield", true) private _input!: HaTextField;
protected render(): TemplateResult {
return html`
-
-
-
+
+
${this.filter &&
html`
`}
-
+
`;
}
- protected updated(changedProps: PropertyValues) {
- if (
- changedProps.has("noUnderline") &&
- (this.noUnderline || changedProps.get("noUnderline") !== undefined)
- ) {
- (
- this._input.inputElement!.parentElement!.shadowRoot!.querySelector(
- "div.unfocused-line"
- ) as HTMLElement
- ).style.display = this.noUnderline ? "none" : "block";
- }
- }
-
private async _filterChanged(value: string) {
fireEvent(this, "value-changed", { value: String(value) });
}
@@ -91,15 +71,24 @@ class SearchInput extends LitElement {
static get styles(): CSSResultGroup {
return css`
+ :host {
+ display: inline-flex;
+ }
ha-svg-icon,
ha-icon-button {
color: var(--primary-text-color);
}
+ ha-svg-icon {
+ outline: none;
+ }
ha-icon-button {
--mdc-icon-button-size: 24px;
}
- ha-svg-icon.prefix {
- margin: 8px;
+ .clear-button {
+ --mdc-icon-size: 20px;
+ }
+ ha-textfield {
+ display: inherit;
}
`;
}
diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index 372bfa4460..babc785d50 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -928,11 +928,10 @@ export class HaDataTable extends LitElement {
}
.table-header {
border-bottom: 1px solid var(--divider-color);
- padding: 0 16px;
}
search-input {
- position: relative;
- top: 2px;
+ display: block;
+ flex: 1;
}
slot[name="header"] {
display: block;
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
index c166918cc9..56bac512dd 100644
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -24,7 +24,6 @@ import { computeDomain } from "../../common/entity/compute_domain";
import { computeStateName } from "../../common/entity/compute_state_name";
import { domainIcon } from "../../common/entity/domain_icon";
import { navigate } from "../../common/navigate";
-import "../../common/search/search-input";
import { caseInsensitiveStringCompare } from "../../common/string/compare";
import {
fuzzyFilterSort,
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index c291eab335..c05530b856 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -159,28 +159,28 @@ export class HaTabsSubpageDataTable extends LitElement {
const headerToolbar = html`
- ${filterInfo
- ? html`
- ${this.narrow
- ? html`
`
- : filterInfo}
-
- ${this.hass.localize("ui.components.data-table.clear")}
-
-
`
- : ""}`;
+
+
+ ${filterInfo
+ ? html`
+ ${this.narrow
+ ? html`
`
+ : filterInfo}
+
+ ${this.hass.localize("ui.components.data-table.clear")}
+
+
`
+ : ""}
+
`;
return html`