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