diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts index 392e49d6fd..edb1c704fd 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -4,7 +4,6 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; -import { styleMap } from "lit/directives/style-map"; import { until } from "lit/directives/until"; import memoizeOne from "memoize-one"; import { storage } from "../../../../common/decorators/storage"; @@ -59,10 +58,6 @@ export class HuiCardPicker extends LitElement { @state() private _filter = ""; - @state() private _width?: number; - - @state() private _height?: number; - private _unusedEntities?: string[]; private _usedEntities?: string[]; @@ -146,13 +141,7 @@ export class HuiCardPicker extends LitElement { "ui.panel.lovelace.editor.edit_card.search_cards" )} > -
+
${this._filter ? html`
${this._filterCards(this._cards, this._filter).map( @@ -262,6 +251,16 @@ export class HuiCardPicker extends LitElement { this._loadCards(); } + protected updated(changedProps) { + super.updated(changedProps); + if (changedProps.has("_filter")) { + const div = this.parentElement!.shadowRoot!.getElementById("content"); + if (div) { + div.scrollTo({ behavior: "auto", top: 0 }); + } + } + } + private _loadCards() { let cards: Card[] = coreCards.map((card: Card) => ({ name: this.hass!.localize( @@ -352,30 +351,7 @@ export class HuiCardPicker extends LitElement { } private _handleSearchChange(ev: CustomEvent) { - const value = ev.detail.value; - - if (!value) { - // Reset when we no longer filter - this._width = undefined; - this._height = undefined; - } else if (!this._width || !this._height) { - // Save height and width so the dialog doesn't jump while searching - const div = this.shadowRoot!.getElementById("content"); - if (div && !this._width) { - const width = div.clientWidth; - if (width) { - this._width = width; - } - } - if (div && !this._height) { - const height = div.clientHeight; - if (height) { - this._height = height; - } - } - } - - this._filter = value; + this._filter = ev.detail.value; } private _cardPicked(ev: Event): void { diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts index 403bc7c31e..220acc15bc 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts @@ -194,6 +194,8 @@ export class HuiCreateDialogCard @media all and (min-width: 850px) { ha-dialog { --mdc-dialog-min-width: 845px; + --mdc-dialog-min-height: calc(100vh - 72px); + --mdc-dialog-max-height: calc(100vh - 72px); } } @@ -216,7 +218,7 @@ export class HuiCreateDialogCard hui-card-picker { --card-picker-search-shape: 0; - --card-picker-search-margin: -2px -24px 0; + --card-picker-search-margin: 0 -24px 0; } hui-entity-picker-table { display: block;