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

Fix issue with enter key not executing selected item in quick bar list (#7283)

Browse Source
This commit is contained in:
Donnie 2020-10-13 02:16:46 -07:00 committed by GitHub
parent c000d724de
commit 5cddb482f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/dialogs/quick-bar/ha-quick-bar.ts
View File

@ -24,6 +24,7 @@ import { QuickBarParams } from "./show-dialog-quick-bar";
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntity } from "home-assistant-js-websocket";
import { compare } from "../../common/string/compare"; import { compare } from "../../common/string/compare";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { SingleSelectedEvent } from "@material/mwc-list/mwc-list-foundation";
interface CommandItem extends ServiceCallRequest { interface CommandItem extends ServiceCallRequest {
text: string; text: string;
@ -72,11 +73,9 @@ export class QuickBar extends LitElement {
type="search" type="search"
value=${this._commandMode ? `>${this._itemFilter}` : this._itemFilter} value=${this._commandMode ? `>${this._itemFilter}` : this._itemFilter}
></paper-input> ></paper-input>
<mwc-list>
${this._commandMode ${this._commandMode
? this.renderCommandsList(this._itemFilter) ? this.renderCommandsList(this._itemFilter)
: this.renderEntityList(this._itemFilter)} : this.renderEntityList(this._itemFilter)}
</mwc-list>
</ha-dialog> </ha-dialog>
`; `;
} }
@ -85,20 +84,19 @@ export class QuickBar extends LitElement {
const items = this._filterCommandItems(this._commandItems, filter); const items = this._filterCommandItems(this._commandItems, filter);
return html` return html`
<mwc-list @selected=${this._processItemAndCloseDialog}>
${items.map( ${items.map(
({ text, domain, service, serviceData }) => html` (item) => html`
<mwc-list-item <mwc-list-item .item=${item} graphic="icon">
@click=${this._executeCommand} <ha-icon
.domain=${domain} .icon=${domainIcon(item.domain)}
.service=${service} slot="graphic"
.serviceData=${serviceData} ></ha-icon>
graphic="icon" ${item.text}
>
<ha-icon .icon=${domainIcon(domain)} slot="graphic"></ha-icon>
${text}
</mwc-list-item> </mwc-list-item>
` `
)} )}
</mwc-list>
`; `;
}); });
@ -109,15 +107,17 @@ export class QuickBar extends LitElement {
); );
return html` return html`
${entities.map((entity_id) => { <mwc-list activatable @selected=${this._entityMoreInfo}>
const domain = computeDomain(entity_id); ${entities.map((entityId) => {
const domain = computeDomain(entityId);
return html` return html`
<mwc-list-item @click=${this._entityMoreInfo} graphic="icon"> <mwc-list-item graphic="icon" .entityId=${entityId}>
<ha-icon .icon=${domainIcon(domain)} slot="graphic"></ha-icon> <ha-icon .icon=${domainIcon(domain)} slot="graphic"></ha-icon>
${entity_id} ${entityId}
</mwc-list-item> </mwc-list-item>
`; `;
})} })}
</mwc-list>
`; `;
}); });
@ -161,33 +161,30 @@ export class QuickBar extends LitElement {
} }
private _filterEntityItems( private _filterEntityItems(
entity_ids: HassEntity["entity_id"][], entityIds: HassEntity["entity_id"][],
filter: string filter: string
): HassEntity["entity_id"][] { ): HassEntity["entity_id"][] {
return entity_ids return entityIds
.filter((entity_id) => .filter((entityId) =>
fuzzySequentialMatch(filter.toLowerCase(), entity_id) fuzzySequentialMatch(filter.toLowerCase(), entityId)
) )
.sort(); .sort();
} }
private async _executeCommand(ev: Event) { private async _processItemAndCloseDialog(ev: SingleSelectedEvent) {
const target = ev.currentTarget as any; const index = ev.detail.index;
const item = (ev.target as any).items[index].item;
await this.hass.callService( await this.hass.callService(item.domain, item.service, item.serviceData);
target.domain,
target.service,
target.serviceData
);
this.closeDialog(); this.closeDialog();
} }
private _entityMoreInfo(ev: Event) { private _entityMoreInfo(ev: SingleSelectedEvent) {
ev.preventDefault(); const index = ev.detail.index;
fireEvent(this, "hass-more-info", { const entityId = (ev.target as any).items[index].entityId;
entityId: (ev.target as any).text,
}); fireEvent(this, "hass-more-info", { entityId });
this.closeDialog(); this.closeDialog();
} }