Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix automation picker overflow menu for keyboard #21048

Merged
merged 5 commits into from
Jul 3, 2024
Merged

Fix automation picker overflow menu for keyboard #21048

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9f4ece6
Fix automation picker overflow menu for keyboard
karwosts Jun 9, 2024
2b8eb87
some updates from review
karwosts Jun 12, 2024
a41ad9c
typing
karwosts Jun 13, 2024
705fbea
no removeEventListener
karwosts Jun 14, 2024
3f37eff
updates from review
karwosts Jul 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 22 additions & 8 deletions src/panels/config/automation/ha-automation-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -822,7 +822,8 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
</ha-fab>
</hass-tabs-subpage-data-table>
<ha-menu id="overflow-menu" positioning="fixed">
<ha-menu-item @click=${this._showInfo}>
<ha-menu-item .action=${this._showInfo}
karwosts marked this conversation as resolved.
Show resolved Hide resolved
@close-menu=${this._handleMenuClose}>
karwosts marked this conversation as resolved.
Show resolved Hide resolved
<ha-svg-icon
.path=${mdiInformationOutline}
slot="start"
Expand All @@ -832,29 +833,33 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
</div>
</ha-menu-item>

<ha-menu-item @click=${this._showSettings}>
<ha-menu-item .action=${this._showSettings}
@close-menu=${this._handleMenuClose}>
<ha-svg-icon .path=${mdiCog} slot="start"></ha-svg-icon>
<div slot="headline">
${this.hass.localize(
"ui.panel.config.automation.picker.show_settings"
)}
</div>
</ha-menu-item>
<ha-menu-item @click=${this._editCategory}>
<ha-menu-item .action=${this._editCategory}
@close-menu=${this._handleMenuClose}>
<ha-svg-icon .path=${mdiTag} slot="start"></ha-svg-icon>
<div slot="headline">
${this.hass.localize(
`ui.panel.config.automation.picker.${this._overflowAutomation?.category ? "edit_category" : "assign_category"}`
)}
</div>
</ha-menu-item>
<ha-menu-item @click=${this._runActions}>
<ha-menu-item .action=${this._runActions}
@close-menu=${this._handleMenuClose}>
<ha-svg-icon .path=${mdiPlay} slot="start"></ha-svg-icon>
<div slot="headline">
${this.hass.localize("ui.panel.config.automation.editor.run")}
</div>
</ha-menu-item>
<ha-menu-item @click=${this._showTrace}>
<ha-menu-item .action=${this._showTrace}
@close-menu=${this._handleMenuClose}>
<ha-svg-icon .path=${mdiTransitConnection} slot="start"></ha-svg-icon>
<div slot="headline">
${this.hass.localize(
Expand All @@ -863,13 +868,15 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
</div>
</ha-menu-item>
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._duplicate}>
<ha-menu-item .action=${this._duplicate}
@close-menu=${this._handleMenuClose}>
<ha-svg-icon .path=${mdiContentDuplicate} slot="start"></ha-svg-icon>
<div slot="headline">
${this.hass.localize("ui.panel.config.automation.picker.duplicate")}
</div>
</ha-menu-item>
<ha-menu-item @click=${this._toggle}>
<ha-menu-item .action=${this._toggle}
@close-menu=${this._handleMenuClose}>
<ha-svg-icon
.path=${
this._overflowAutomation?.state === "off"
Expand All @@ -888,7 +895,8 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
}
</div>
</ha-menu-item>
<ha-menu-item @click=${this._deleteConfirm} class="warning">
<ha-menu-item .action=${this._deleteConfirm} class="warning"
@close-menu=${this._handleMenuClose}>
<ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
<div slot="headline">
${this.hass.localize("ui.panel.config.automation.picker.delete")}
Expand All @@ -898,6 +906,12 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
`;
}

private _handleMenuClose(ev) {
steverep marked this conversation as resolved.
Show resolved Hide resolved
if (ev.detail.reason.key === "Escape") return;
karwosts marked this conversation as resolved.
Show resolved Hide resolved
const action = ev.currentTarget.action.bind(this);
Copy link
Member

@bramkragten bramkragten Jun 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of using bind, can we make the action functions arrow functions?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we should use a switch/case with a string action to call the right function instead of binding the function on the element.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of using target or currentTarget, use initiator defined in the custom event detail. Then I wonder if the key/reason check is even necessary as hopefully that would be null or undefined unless the user actually took the action with space or enter?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The initiator is still ha-menu-item when canceling the menu with Escape key.

action(ev);
}
karwosts marked this conversation as resolved.
Show resolved Hide resolved

protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (changedProps.has("_entityReg")) {
Expand Down
Loading