jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 17:56:46 +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

85
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`
${items.map( <mwc-list @selected=${this._processItemAndCloseDialog}>
({ text, domain, service, serviceData }) => html` ${items.map(
<mwc-list-item (item) => html`
@click=${this._executeCommand} <mwc-list-item .item=${item} graphic="icon">
.domain=${domain} <ha-icon
.service=${service} .icon=${domainIcon(item.domain)}
.serviceData=${serviceData} slot="graphic"
graphic="icon" ></ha-icon>
> ${item.text}
<ha-icon .icon=${domainIcon(domain)} slot="graphic"></ha-icon> </mwc-list-item>
${text} `
</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) => {
return html` const domain = computeDomain(entityId);
<mwc-list-item @click=${this._entityMoreInfo} graphic="icon"> return html`
<ha-icon .icon=${domainIcon(domain)} slot="graphic"></ha-icon> <mwc-list-item graphic="icon" .entityId=${entityId}>
${entity_id} <ha-icon .icon=${domainIcon(domain)} slot="graphic"></ha-icon>
</mwc-list-item> ${entityId}
`; </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();
} }