jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-16 13:56:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Focus on card search input when adding new card (#23309)

Browse Source 
* Focus on card search input when adding new card

* Update src/panels/lovelace/editor/card-editor/hui-card-picker.ts

Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>

* update and fix

* not on mobile

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Marcin 2024-12-16 14:54:29 +01:00 committed by GitHub
parent 6e2f0d8c9b
commit 8722157623
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/panels/lovelace/editor/card-editor/hui-card-picker.ts
View File

@ -69,6 +69,16 @@ export class HuiCardPicker extends LitElement {
private _usedEntities?: string[]; private _usedEntities?: string[];
public async focus(): Promise<void> {
const searchInput = this.renderRoot.querySelector("search-input");
if (searchInput) {
searchInput.focus();
} else {
await this.updateComplete;
this.focus();
}
}
private _filterCards = memoizeOne( private _filterCards = memoizeOne(
(cardElements: CardElement[], filter?: string): CardElement[] => { (cardElements: CardElement[], filter?: string): CardElement[] => {
if (!filter) { if (!filter) {

12
src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
View File

@ -3,6 +3,7 @@ import "@material/mwc-tab/mwc-tab";
import { mdiClose } from "@mdi/js"; import { mdiClose } from "@mdi/js";
import type { CSSResultGroup } from "lit"; import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { ifDefined } from "lit/directives/if-defined";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { cache } from "lit/directives/cache"; import { cache } from "lit/directives/cache";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
@ -60,9 +61,15 @@ export class HuiCreateDialogCard
@state() private _currTabIndex = 0; @state() private _currTabIndex = 0;
@state() private _narrow = false;
public async showDialog(params: CreateCardDialogParams): Promise<void> { public async showDialog(params: CreateCardDialogParams): Promise<void> {
this._params = params; this._params = params;
this._narrow = matchMedia(
"all and (max-width: 450px), all and (max-height: 500px)"
).matches;
const containerConfig = findLovelaceContainer( const containerConfig = findLovelaceContainer(
params.lovelaceConfig, params.lovelaceConfig,
params.path params.path
@ -120,7 +127,7 @@ export class HuiCreateDialogCard
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.panel.lovelace.editor.cardpicker.by_card" "ui.panel.lovelace.editor.cardpicker.by_card"
)} )}
dialogInitialFocus dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)}
></mwc-tab> ></mwc-tab>
<mwc-tab <mwc-tab
.label=${this.hass!.localize( .label=${this.hass!.localize(
@ -133,6 +140,7 @@ export class HuiCreateDialogCard
this._currTabIndex === 0 this._currTabIndex === 0
? html` ? html`
<hui-card-picker <hui-card-picker
dialogInitialFocus=${ifDefined(this._narrow ? undefined : "")}
.suggestedCards=${this._params.suggestedCards} .suggestedCards=${this._params.suggestedCards}
.lovelace=${this._params.lovelaceConfig} .lovelace=${this._params.lovelaceConfig}
.hass=${this.hass} .hass=${this.hass}
@ -143,7 +151,7 @@ export class HuiCreateDialogCard
<hui-entity-picker-table <hui-entity-picker-table
no-label-float no-label-float
.hass=${this.hass} .hass=${this.hass}
.narrow=${true} narrow
.entities=${this._allEntities(this.hass.states)} .entities=${this._allEntities(this.hass.states)}
@selected-changed=${this._handleSelectedChanged} @selected-changed=${this._handleSelectedChanged}
></hui-entity-picker-table> ></hui-entity-picker-table>