Skip to content

Commit 2657b34

Browse files
karwostskarwosts
committed
Fix keyboard for integration page overflow menus
1 parent 91a0066 commit 2657b34

File tree

3 files changed

+60
-47
lines changed

3 files changed

+60
-47
lines changed

‎src/panels/config/integrations/ha-config-entry-device-row.ts‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ class HaConfigEntryDeviceRow extends LitElement {
8787
${!this.narrow
8888
? html`<ha-icon-button
8989
slot="end"
90-
@click=${this._handleEditDevice}
90+
@click=${this._handleEditDeviceButton}
9191
.path=${mdiPencil}
9292
.label=${this.hass.localize(
9393
"ui.panel.config.integrations.config_entry.device.edit"
@@ -106,7 +106,7 @@ class HaConfigEntryDeviceRow extends LitElement {
106106
.path=${mdiDotsVertical}
107107
></ha-icon-button>
108108
${this.narrow
109-
? html`<ha-md-menu-item @click=${this._handleEditDevice}>
109+
? html`<ha-md-menu-item .clickAction=${this._handleEditDevice}>
110110
<ha-svg-icon .path=${mdiPencil} slot="start"></ha-svg-icon>
111111
${this.hass.localize(
112112
"ui.panel.config.integrations.config_entry.device.edit"
@@ -115,7 +115,7 @@ class HaConfigEntryDeviceRow extends LitElement {
115115
: nothing}
116116
${entities.length
117117
? html`
118-
<ha-md-menu-item @click=${this._handleNavigateToEntities}>
118+
<ha-md-menu-item .clickAction=${this._handleNavigateToEntities}>
119119
<ha-svg-icon
120120
.path=${mdiShapeOutline}
121121
slot="start"
@@ -130,7 +130,7 @@ class HaConfigEntryDeviceRow extends LitElement {
130130
: nothing}
131131
<ha-md-menu-item
132132
class=${device.disabled_by !== "user" ? "warning" : ""}
133-
@click=${this._handleDisableDevice}
133+
.clickAction=${this._handleDisableDevice}
134134
.disabled=${device.disabled_by !== "user" && device.disabled_by}
135135
>
136136
<ha-svg-icon .path=${mdiStopCircleOutline} slot="start"></ha-svg-icon>
@@ -160,7 +160,7 @@ class HaConfigEntryDeviceRow extends LitElement {
160160
${this.entry.supports_remove_device
161161
? html`<ha-md-menu-item
162162
class="warning"
163-
@click=${this._handleDeleteDevice}
163+
.clickAction=${this._handleDeleteDevice}
164164
>
165165
<ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
166166
${this.hass.localize(
@@ -175,21 +175,25 @@ class HaConfigEntryDeviceRow extends LitElement {
175175
private _getEntities = (): EntityRegistryEntry[] =>
176176
this.entities?.filter((entity) => entity.device_id === this.device.id);
177177

178-
private _handleEditDevice(ev: MouseEvent) {
178+
private _handleEditDeviceButton(ev: MouseEvent) {
179179
ev.stopPropagation(); // Prevent triggering the click handler on the list item
180+
this._handleEditDevice();
181+
}
182+
183+
private _handleEditDevice = () => {
180184
showDeviceRegistryDetailDialog(this, {
181185
device: this.device,
182186
updateEntry: async (updates) => {
183187
await updateDeviceRegistryEntry(this.hass, this.device.id, updates);
184188
},
185189
});
186-
}
190+
};
187191

188-
private _handleNavigateToEntities() {
192+
private _handleNavigateToEntities = () => {
189193
navigate(`/config/entities/?historyBack=1&device=${this.device.id}`);
190-
}
194+
};
191195

192-
private async _handleDisableDevice() {
196+
private _handleDisableDevice = async () => {
193197
const disable = this.device.disabled_by === null;
194198

195199
if (disable) {
@@ -263,9 +267,9 @@ class HaConfigEntryDeviceRow extends LitElement {
263267
await updateDeviceRegistryEntry(this.hass, this.device.id, {
264268
disabled_by: disable ? "user" : null,
265269
});
266-
}
270+
};
267271

268-
private async _handleDeleteDevice() {
272+
private _handleDeleteDevice = async () => {
269273
const entry = this.entry;
270274
const confirmed = await showConfirmationDialog(this, {
271275
text: this.hass.localize("ui.panel.config.devices.confirm_delete"),
@@ -290,7 +294,7 @@ class HaConfigEntryDeviceRow extends LitElement {
290294
text: err.message,
291295
});
292296
}
293-
}
297+
};
294298

295299
private _handleNavigateToDevice() {
296300
navigate(`/config/devices/device/${this.device.id}`);

‎src/panels/config/integrations/ha-config-entry-row.ts‎

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,7 @@ class HaConfigEntryRow extends LitElement {
302302
item.supports_unload &&
303303
item.source !== "system"
304304
? html`
305-
<ha-md-menu-item @click=${this._handleReload}>
305+
<ha-md-menu-item .clickAction=${this._handleReload}>
306306
<ha-svg-icon slot="start" .path=${mdiReload}></ha-svg-icon>
307307
${this.hass.localize(
308308
"ui.panel.config.integrations.config_entry.reload"
@@ -311,14 +311,14 @@ class HaConfigEntryRow extends LitElement {
311311
`
312312
: nothing}
313313
314-
<ha-md-menu-item @click=${this._handleRename} graphic="icon">
314+
<ha-md-menu-item .clickAction=${this._handleRename} graphic="icon">
315315
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
316316
${this.hass.localize(
317317
"ui.panel.config.integrations.config_entry.rename"
318318
)}
319319
</ha-md-menu-item>
320320
321-
<ha-md-menu-item @click=${this._handleCopy} graphic="icon">
321+
<ha-md-menu-item .clickAction=${this._handleCopy} graphic="icon">
322322
<ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
323323
${this.hass.localize(
324324
"ui.panel.config.integrations.config_entry.copy"
@@ -328,7 +328,7 @@ class HaConfigEntryRow extends LitElement {
328328
${Object.keys(item.supported_subentry_types).map(
329329
(flowType) =>
330330
html`<ha-md-menu-item
331-
@click=${this._addSubEntry}
331+
.clickAction=${this._addSubEntry}
332332
.entry=${item}
333333
.flowType=${flowType}
334334
graphic="icon"
@@ -360,7 +360,7 @@ class HaConfigEntryRow extends LitElement {
360360
item.supports_reconfigure &&
361361
item.source !== "system"
362362
? html`
363-
<ha-md-menu-item @click=${this._handleReconfigure}>
363+
<ha-md-menu-item .clickAction=${this._handleReconfigure}>
364364
<ha-svg-icon slot="start" .path=${mdiWrench}></ha-svg-icon>
365365
${this.hass.localize(
366366
"ui.panel.config.integrations.config_entry.reconfigure"
@@ -369,15 +369,18 @@ class HaConfigEntryRow extends LitElement {
369369
`
370370
: nothing}
371371
372-
<ha-md-menu-item @click=${this._handleSystemOptions} graphic="icon">
372+
<ha-md-menu-item
373+
.clickAction=${this._handleSystemOptions}
374+
graphic="icon"
375+
>
373376
<ha-svg-icon slot="start" .path=${mdiCogOutline}></ha-svg-icon>
374377
${this.hass.localize(
375378
"ui.panel.config.integrations.config_entry.system_options"
376379
)}
377380
</ha-md-menu-item>
378381
${item.disabled_by === "user"
379382
? html`
380-
<ha-md-menu-item @click=${this._handleEnable}>
383+
<ha-md-menu-item .clickAction=${this._handleEnable}>
381384
<ha-svg-icon
382385
slot="start"
383386
.path=${mdiPlayCircleOutline}
@@ -389,7 +392,7 @@ class HaConfigEntryRow extends LitElement {
389392
? html`
390393
<ha-md-menu-item
391394
class="warning"
392-
@click=${this._handleDisable}
395+
.clickAction=${this._handleDisable}
393396
graphic="icon"
394397
>
395398
<ha-svg-icon
@@ -403,7 +406,10 @@ class HaConfigEntryRow extends LitElement {
403406
: nothing}
404407
${item.source !== "system"
405408
? html`
406-
<ha-md-menu-item class="warning" @click=${this._handleDelete}>
409+
<ha-md-menu-item
410+
class="warning"
411+
.clickAction=${this._handleDelete}
412+
>
407413
<ha-svg-icon
408414
slot="start"
409415
class="warning"
@@ -611,7 +617,7 @@ class HaConfigEntryRow extends LitElement {
611617
}
612618
}
613619

614-
private async _handleReload() {
620+
private _handleReload = async () => {
615621
const result = await reloadConfigEntry(this.hass, this.entry.entry_id);
616622
const locale_key = result.require_restart
617623
? "reload_restart_confirm"
@@ -621,28 +627,28 @@ class HaConfigEntryRow extends LitElement {
621627
`ui.panel.config.integrations.config_entry.${locale_key}`
622628
),
623629
});
624-
}
630+
};
625631

626-
private async _handleReconfigure() {
632+
private _handleReconfigure = async () => {
627633
showConfigFlowDialog(this, {
628634
startFlowHandler: this.entry.domain,
629635
showAdvanced: this.hass.userData?.showAdvanced,
630636
manifest: await fetchIntegrationManifest(this.hass, this.entry.domain),
631637
entryId: this.entry.entry_id,
632638
navigateToResult: true,
633639
});
634-
}
640+
};
635641

636-
private async _handleCopy() {
642+
private _handleCopy = async () => {
637643
await copyToClipboard(this.entry.entry_id);
638644
showToast(this, {
639645
message:
640646
this.hass?.localize("ui.common.copied_clipboard") ||
641647
"Copied to clipboard",
642648
});
643-
}
649+
};
644650

645-
private async _handleRename() {
651+
private _handleRename = async () => {
646652
const newName = await showPromptDialog(this, {
647653
title: this.hass.localize("ui.panel.config.integrations.rename_dialog"),
648654
defaultValue: this.entry.title,
@@ -656,7 +662,7 @@ class HaConfigEntryRow extends LitElement {
656662
await updateConfigEntry(this.hass, this.entry.entry_id, {
657663
title: newName,
658664
});
659-
}
665+
};
660666

661667
private async _signUrl(ev) {
662668
const anchor = ev.currentTarget;
@@ -668,7 +674,7 @@ class HaConfigEntryRow extends LitElement {
668674
fileDownload(signedUrl.path);
669675
}
670676

671-
private async _handleDisable() {
677+
private _handleDisable = async () => {
672678
const entryId = this.entry.entry_id;
673679

674680
const confirmed = await showConfirmationDialog(this, {
@@ -706,9 +712,9 @@ class HaConfigEntryRow extends LitElement {
706712
),
707713
});
708714
}
709-
}
715+
};
710716

711-
private async _handleEnable() {
717+
private _handleEnable = async () => {
712718
const entryId = this.entry.entry_id;
713719

714720
let result: DisableConfigEntryResult;
@@ -731,9 +737,9 @@ class HaConfigEntryRow extends LitElement {
731737
),
732738
});
733739
}
734-
}
740+
};
735741

736-
private async _handleDelete() {
742+
private _handleDelete = async () => {
737743
const entryId = this.entry.entry_id;
738744

739745
const applicationCredentialsId =
@@ -767,20 +773,20 @@ class HaConfigEntryRow extends LitElement {
767773
if (applicationCredentialsId) {
768774
this._removeApplicationCredential(applicationCredentialsId);
769775
}
770-
}
776+
};
771777

772-
private _handleSystemOptions() {
778+
private _handleSystemOptions = () => {
773779
showConfigEntrySystemOptionsDialog(this, {
774780
entry: this.entry,
775781
manifest: this.manifest,
776782
});
777-
}
783+
};
778784

779-
private _addSubEntry(ev) {
780-
showSubConfigFlowDialog(this, this.entry, ev.target.flowType, {
785+
private _addSubEntry = (item) => {
786+
showSubConfigFlowDialog(this, this.entry, item.flowType, {
781787
startFlowHandler: this.entry.entry_id,
782788
});
783-
}
789+
};
784790

785791
static styles = [
786792
haStyle,

‎src/panels/config/integrations/ha-config-sub-entry-row.ts‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -145,13 +145,16 @@ class HaConfigSubEntryRow extends LitElement {
145145
</ha-md-menu-item>
146146
`
147147
: nothing}
148-
<ha-md-menu-item @click=${this._handleRenameSub}>
148+
<ha-md-menu-item .clickAction=${this._handleRenameSub}>
149149
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
150150
${this.hass.localize(
151151
"ui.panel.config.integrations.config_entry.rename"
152152
)}
153153
</ha-md-menu-item>
154-
<ha-md-menu-item class="warning" @click=${this._handleDeleteSub}>
154+
<ha-md-menu-item
155+
class="warning"
156+
.clickAction=${this._handleDeleteSub}
157+
>
155158
<ha-svg-icon
156159
slot="start"
157160
class="warning"
@@ -222,7 +225,7 @@ class HaConfigSubEntryRow extends LitElement {
222225
});
223226
}
224227

225-
private async _handleRenameSub(): Promise<void> {
228+
private _handleRenameSub = async (): Promise<void> => {
226229
const newName = await showPromptDialog(this, {
227230
title: this.hass.localize("ui.common.rename"),
228231
defaultValue: this.subEntry.title,
@@ -239,9 +242,9 @@ class HaConfigSubEntryRow extends LitElement {
239242
this.subEntry.subentry_id,
240243
{ title: newName }
241244
);
242-
}
245+
};
243246

244-
private async _handleDeleteSub(): Promise<void> {
247+
private _handleDeleteSub = async (): Promise<void> => {
245248
const confirmed = await showConfirmationDialog(this, {
246249
title: this.hass.localize(
247250
"ui.panel.config.integrations.config_entry.delete_confirm_title",
@@ -263,7 +266,7 @@ class HaConfigSubEntryRow extends LitElement {
263266
this.entry.entry_id,
264267
this.subEntry.subentry_id
265268
);
266-
}
269+
};
267270

268271
static styles = css`
269272
.expand-button {

0 commit comments

Comments
 (0)