From 077f5efe7e1b64ac2855f61e74e54ef340d4ef60 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Mon, 3 Feb 2025 22:30:45 -0800
Subject: [PATCH] Fix menus in Todo list for Keyboard (#24054)

---
 .../lovelace/cards/hui-todo-list-card.ts      | 44 +++++++++++++------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts
index 61bc7ebf00..648c132e5e 100644
--- a/src/panels/lovelace/cards/hui-todo-list-card.ts
+++ b/src/panels/lovelace/cards/hui-todo-list-card.ts
@@ -1,4 +1,5 @@
 import "@material/mwc-list/mwc-list";
+import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import type { List } from "@material/mwc-list/mwc-list";
 import {
   mdiClock,
@@ -286,15 +287,16 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
                     this._todoListSupportsFeature(
                       TodoListEntityFeature.MOVE_TODO_ITEM
                     )
-                      ? html`<ha-button-menu @closed=${stopPropagation} fixed>
+                      ? html`<ha-button-menu
+                          @closed=${stopPropagation}
+                          fixed
+                          @action=${this._handlePrimaryMenuAction}
+                        >
                           <ha-icon-button
                             slot="trigger"
                             .path=${mdiDotsVertical}
                           ></ha-icon-button>
-                          <ha-list-item
-                            @click=${this._toggleReorder}
-                            graphic="icon"
-                          >
+                          <ha-list-item graphic="icon">
                             ${this.hass!.localize(
                               this._reordering
                                 ? "ui.panel.lovelace.cards.todo-list.exit_reorder_items"
@@ -330,16 +332,16 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
                       ${this._todoListSupportsFeature(
                         TodoListEntityFeature.DELETE_TODO_ITEM
                       )
-                        ? html`<ha-button-menu @closed=${stopPropagation} fixed>
+                        ? html`<ha-button-menu
+                            @closed=${stopPropagation}
+                            fixed
+                            @action=${this._handleCompletedMenuAction}
+                          >
                             <ha-icon-button
                               slot="trigger"
                               .path=${mdiDotsVertical}
                             ></ha-icon-button>
-                            <ha-list-item
-                              @click=${this._clearCompletedItems}
-                              graphic="icon"
-                              class="warning"
-                            >
+                            <ha-list-item graphic="icon" class="warning">
                               ${this.hass!.localize(
                                 "ui.panel.lovelace.cards.todo-list.clear_items"
                               )}
@@ -548,7 +550,15 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
     }
   }
 
-  private async _clearCompletedItems(): Promise<void> {
+  private _handleCompletedMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._clearCompletedItems();
+        break;
+    }
+  }
+
+  private _clearCompletedItems() {
     if (!this.hass) {
       return;
     }
@@ -603,7 +613,15 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
     }
   }
 
-  private async _toggleReorder() {
+  private _handlePrimaryMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._toggleReorder();
+        break;
+    }
+  }
+
+  private _toggleReorder() {
     this._reordering = !this._reordering;
   }