mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-16 05:46:35 +00:00
Focus on card search input when adding new card (#23309)
* 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:
parent
6e2f0d8c9b
commit
8722157623
@ -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) {
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user