Fixes for todo card (#18388)

src/data/todo.ts

@@ -2,6 +2,7 @@ import { HomeAssistant, ServiceCallResponse } from "../types";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { isUnavailableState } from "./entity";
+import { stringCompare } from "../common/string/compare";
 
 export interface TodoList {
   entity_id: string;
@@ -33,12 +34,12 @@ export const getTodoLists = (hass: HomeAssistant): TodoList[] =>
         computeDomain(entityId) === "todo" &&
         !isUnavailableState(hass.states[entityId].state)
     )
-    .sort()
     .map((entityId) => ({
       ...hass.states[entityId],
       entity_id: entityId,
       name: computeStateName(hass.states[entityId]),
-    }));
+    }))
+    .sort((a, b) => stringCompare(a.name, b.name, hass.locale.language));
 
 export interface TodoItems {
   items: TodoItem[];

src/panels/lovelace/cards/hui-todo-list-card.ts

@@ -73,7 +73,7 @@ export class HuiTodoListCard
 
   @state() private _entityId?: string;
 
-  @state() private _items: Record<string, TodoItem> = {};
+  @state() private _items?: Record<string, TodoItem>;
 
   @state() private _uncheckedItems?: TodoItem[];
 
@@ -96,8 +96,6 @@ export class HuiTodoListCard
 
     this._config = config;
     this._entityId = config.entity;
-    this._uncheckedItems = [];
-    this._checkedItems = [];
   }
 
   protected checkConfig(config: TodoListCardConfig): void {
@@ -112,13 +110,17 @@ export class HuiTodoListCard
   }
 
   public willUpdate(
-    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
     if (!this.hasUpdated) {
       if (!this._entityId) {
         this._entityId = this.getEntityId();
       }
       this._fetchData();
+    } else if (changedProperties.has("_entityId") || !this._items) {
+      this._uncheckedItems = [];
+      this._checkedItems = [];
+      this._fetchData();
     }
   }
 
@@ -338,7 +340,7 @@ export class HuiTodoListCard
   }
 
   private _completeItem(ev): void {
-    const item = this._items[ev.target.itemId];
+    const item = this._items![ev.target.itemId];
     updateItem(this.hass!, this._entityId!, {
       ...item,
       status: ev.target.checked
@@ -350,7 +352,7 @@ export class HuiTodoListCard
   private _saveEdit(ev): void {
     // If name is not empty, update the item otherwise remove it
     if (ev.target.value) {
-      const item = this._items[ev.target.itemId];
+      const item = this._items![ev.target.itemId];
       updateItem(this.hass!, this._entityId!, {
         ...item,
         summary: ev.target.value,

src/panels/todo/ha-panel-todo.ts

@@ -14,7 +14,6 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { storage } from "../../common/decorators/storage";
-import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import "../../components/ha-button";
 import "../../components/ha-icon-button";
@@ -87,9 +86,7 @@ class PanelTodo extends LitElement {
     super.willUpdate(changedProperties);
 
     if (!this.hasUpdated && !this._entityId) {
-      this._entityId = Object.keys(this.hass.states).find(
-        (entityId) => computeDomain(entityId) === "todo"
-      );
+      this._entityId = getTodoLists(this.hass)[0]?.entity_id;
     } else if (!this.hasUpdated) {
       this._createCard();
     }