diff --git a/src/components/ha-filter-integrations.ts b/src/components/ha-filter-integrations.ts
index 2f8b6f3cf0..cab9726f44 100644
--- a/src/components/ha-filter-integrations.ts
+++ b/src/components/ha-filter-integrations.ts
@@ -13,6 +13,7 @@ import {
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant } from "../types";
import "./ha-domain-icon";
+import "./search-input-outlined";
@customElement("ha-filter-integrations")
export class HaFilterIntegrations extends LitElement {
@@ -28,6 +29,8 @@ export class HaFilterIntegrations extends LitElement {
@state() private _shouldRender = false;
+ @state() private _filter?: string;
+
protected render() {
return html`
${this._manifests && this._shouldRender
- ? html`
+ ? html`
+
${repeat(
- this._integrations(this._manifests, this.value),
+ this._integrations(this._manifests, this._filter, this.value),
(i) => i.domain,
(integration) =>
html``
)}
-
- `
+ `
: nothing}
`;
@@ -103,12 +110,17 @@ export class HaFilterIntegrations extends LitElement {
}
private _integrations = memoizeOne(
- (manifest: IntegrationManifest[], _value) =>
+ (manifest: IntegrationManifest[], filter: string | undefined, _value) =>
manifest
.filter(
(mnfst) =>
- !mnfst.integration_type ||
- !["entity", "system", "hardware"].includes(mnfst.integration_type)
+ (!mnfst.integration_type ||
+ !["entity", "system", "hardware"].includes(
+ mnfst.integration_type
+ )) &&
+ (!filter ||
+ mnfst.name.toLowerCase().includes(filter) ||
+ mnfst.domain.toLowerCase().includes(filter))
)
.sort((a, b) =>
stringCompare(
@@ -122,7 +134,11 @@ export class HaFilterIntegrations extends LitElement {
private async _integrationsSelected(
ev: CustomEvent>>
) {
- const integrations = this._integrations(this._manifests!, this.value);
+ const integrations = this._integrations(
+ this._manifests!,
+ this._filter,
+ this.value
+ );
if (!ev.detail.index.size) {
fireEvent(this, "data-table-filter-changed", {
@@ -156,6 +172,10 @@ export class HaFilterIntegrations extends LitElement {
});
}
+ private _handleSearchChange(ev: CustomEvent) {
+ this._filter = ev.detail.value.toLowerCase();
+ }
+
static get styles(): CSSResultGroup {
return [
haStyleScrollbar,
@@ -195,6 +215,10 @@ export class HaFilterIntegrations extends LitElement {
padding: 0px 2px;
color: var(--text-primary-color);
}
+ search-input-outlined {
+ display: block;
+ padding: 0 8px;
+ }
`,
];
}