Fix mobile touch edit card click after saving card

* Add max target picker width for history and activity

* Fix target picker  area selection in history and activity

package.json

@@ -52,7 +52,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-ha.1",
+    "@home-assistant/webawesome": "3.0.0-ha.2",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",

src/components/ha-dropdown-item.ts

@@ -1,6 +1,9 @@
 import DropdownItem from "@home-assistant/webawesome/dist/components/dropdown-item/dropdown-item";
-import { css, type CSSResultGroup } from "lit";
+import "@home-assistant/webawesome/dist/components/icon/icon";
+import { css, type CSSResultGroup, html } from "lit";
 import { customElement } from "lit/decorators";
+import "./ha-svg-icon";
+import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "@mdi/js";
 
 /**
  * Home Assistant dropdown item component
@@ -14,6 +17,16 @@ import { customElement } from "lit/decorators";
  */
 @customElement("ha-dropdown-item")
 export class HaDropdownItem extends DropdownItem {
+  protected renderCheckboxIcon() {
+    return html`
+      <ha-svg-icon
+        id="check"
+        part="checkmark"
+        .path=${this.checked ? mdiCheckboxMarked : mdiCheckboxBlankOutline}
+      ></ha-svg-icon>
+    `;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       DropdownItem.styles,
@@ -22,6 +35,10 @@ export class HaDropdownItem extends DropdownItem {
           min-height: var(--ha-space-10);
         }
 
+        #check {
+          visibility: visible;
+        }
+
         #icon ::slotted(*) {
           color: var(--ha-color-on-neutral-normal);
         }

src/components/ha-generic-picker.ts

@@ -367,7 +367,10 @@ export class HaGenericPicker extends LitElement {
 
         wa-popover::part(body) {
           width: max(var(--body-width), 250px);
-          max-width: max(var(--body-width), 250px);
+          max-width: var(
+            --ha-generic-picker-max-width,
+            max(var(--body-width), 250px)
+          );
           max-height: 500px;
           height: 70vh;
           overflow: hidden;

src/components/ha-service-picker.ts

@@ -22,10 +22,10 @@ interface ServiceComboBoxItem extends PickerComboBoxItem {
 }
 
 const SEARCH_KEYS = [
-  { name: "name", weight: 10 },
-  { name: "description", weight: 8 },
-  { name: "domainName", weight: 6 },
-  { name: "serviceId", weight: 3 },
+  { name: "search_labels.name", weight: 10 },
+  { name: "search_labels.description", weight: 8 },
+  { name: "search_labels.domainName", weight: 6 },
+  { name: "search_labels.serviceId", weight: 3 },
 ];
 
 @customElement("ha-service-picker")

src/components/ha-target-picker.ts

@@ -964,10 +964,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     let hasFloor = false;
     let rtl = false;
     let showEntityId = false;
-
     if (type === "area" || type === "floor") {
-      item.id = item[type]?.[`${type}_id`];
-
       rtl = computeRTL(this.hass);
       hasFloor =
         type === "area" && !!(item as FloorComboBoxItem).area?.floor_id;

src/panels/config/automation/add-automation-element/ha-automation-add-search.ts

@@ -85,11 +85,11 @@ const TARGET_SEARCH_SECTIONS = [
 
 export const ITEM_SEARCH_KEYS: FuseWeightedKey[] = [
   {
-    name: "name",
+    name: "primary",
     weight: 10,
   },
   {
-    name: "description",
+    name: "secondary",
     weight: 7,
   },
 ];

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

@@ -632,6 +632,7 @@ class HaPanelHistory extends LitElement {
 
         :host([virtualize]) {
           height: 100%;
+          --ha-generic-picker-max-width: 400px;
         }
 
         .progress-wrapper {

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

@@ -303,6 +303,9 @@ export class HaPanelLogbook extends LitElement {
     return [
       haStyle,
       css`
+        :host {
+          --ha-generic-picker-max-width: 400px;
+        }
         ha-logbook {
           height: calc(
             100vh -

src/panels/lovelace/badges/hui-badge.ts

@@ -67,6 +67,11 @@ export class HuiBadge extends ConditionalListenerMixin<LovelaceBadgeConfig>(
     if (this.hass) {
       this._element.hass = this.hass;
     }
+    // Update element when the visibility of the badge changes, e.g. custom badge
+    this._element.addEventListener("badge-visibility-changed", (ev: Event) => {
+      ev.stopPropagation();
+      this._updateVisibility();
+    });
     this._element.addEventListener(
       "ll-upgrade",
       (ev: Event) => {
@@ -168,7 +173,11 @@ export class HuiBadge extends ConditionalListenerMixin<LovelaceBadgeConfig>(
       fireEvent(this, "badge-visibility-changed", { value: visible });
     }
 
-    if (!visible && this._element.parentElement) {
+    if (this._element.connectedWhileHidden === true) {
+      if (!this._element.parentElement) {
+        this.appendChild(this._element);
+      }
+    } else if (!visible && this._element.parentElement) {
       this.removeChild(this._element);
     } else if (visible && !this._element.parentElement) {
       this.appendChild(this._element);

src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts

@@ -88,16 +88,18 @@ export class HuiEnergyGasGraphCard
 
     return html`
       <ha-card>
-        <div class="card-header">
-          <span>${this._config.title ? this._config.title : nothing}</span>
-          ${this._total
-            ? html`<hui-energy-graph-chip
-                .tooltip=${this._formatTotal(this._total)}
-              >
-                ${formatNumber(this._total, this.hass.locale)} ${this._unit}
-              </hui-energy-graph-chip>`
-            : nothing}
-        </div>
+        ${this._config.title
+          ? html` <div class="card-header">
+              <span>${this._config.title}</span>
+              ${this._total
+                ? html`<hui-energy-graph-chip
+                    .tooltip=${this._formatTotal(this._total)}
+                  >
+                    ${formatNumber(this._total, this.hass.locale)} ${this._unit}
+                  </hui-energy-graph-chip>`
+                : nothing}
+            </div>`
+          : nothing}
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,

src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts

@@ -90,16 +90,18 @@ export class HuiEnergySolarGraphCard
 
     return html`
       <ha-card>
-        <div class="card-header">
-          <span>${this._config.title ? this._config.title : nothing}</span>
-          ${this._total
-            ? html`<hui-energy-graph-chip
-                .tooltip=${this._formatTotal(this._total)}
-              >
-                ${formatNumber(this._total, this.hass.locale)} kWh
-              </hui-energy-graph-chip>`
-            : nothing}
-        </div>
+        ${this._config.title
+          ? html` <div class="card-header">
+              <span>${this._config.title}</span>
+              ${this._total
+                ? html`<hui-energy-graph-chip
+                    .tooltip=${this._formatTotal(this._total)}
+                  >
+                    ${formatNumber(this._total, this.hass.locale)} kWh
+                  </hui-energy-graph-chip>`
+                : nothing}
+            </div>`
+          : nothing}
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,

src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts

@@ -103,19 +103,21 @@ export class HuiEnergyUsageGraphCard
 
     return html`
       <ha-card>
-        <div class="card-header">
-          <span>${this._config.title ? this._config.title : nothing}</span>
-          ${this._total
-            ? html`<hui-energy-graph-chip
-                .tooltip=${this._formatTotal(this._total)}
-              >
-                ${this.hass.localize(
-                  "ui.panel.lovelace.cards.energy.energy_usage_graph.total_usage",
-                  { num: formatNumber(this._total, this.hass.locale) }
-                )}
-              </hui-energy-graph-chip>`
-            : nothing}
-        </div>
+        ${this._config.title
+          ? html` <div class="card-header">
+              <span>${this._config.title}</span>
+              ${this._total
+                ? html`<hui-energy-graph-chip
+                    .tooltip=${this._formatTotal(this._total)}
+                  >
+                    ${this.hass.localize(
+                      "ui.panel.lovelace.cards.energy.energy_usage_graph.total_usage",
+                      { num: formatNumber(this._total, this.hass.locale) }
+                    )}
+                  </hui-energy-graph-chip>`
+                : nothing}
+            </div>`
+          : nothing}
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,

src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts

@@ -88,16 +88,18 @@ export class HuiEnergyWaterGraphCard
 
     return html`
       <ha-card>
-        <div class="card-header">
-          <span>${this._config.title ? this._config.title : nothing}</span>
-          ${this._total
-            ? html`<hui-energy-graph-chip
-                .tooltip=${this._formatTotal(this._total)}
-              >
-                ${formatNumber(this._total, this.hass.locale)} ${this._unit}
-              </hui-energy-graph-chip>`
-            : nothing}
-        </div>
+        ${this._config.title
+          ? html` <div class="card-header">
+              <span>${this._config.title ? this._config.title : nothing}</span>
+              ${this._total
+                ? html`<hui-energy-graph-chip
+                    .tooltip=${this._formatTotal(this._total)}
+                  >
+                    ${formatNumber(this._total, this.hass.locale)} ${this._unit}
+                  </hui-energy-graph-chip>`
+                : nothing}
+            </div>`
+          : nothing}
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,

src/panels/lovelace/components/hui-card-edit-mode.ts

@@ -60,6 +60,9 @@ export class HuiCardEditMode extends LitElement {
     });
     this.addEventListener("touchstart", () => {
       this._touchStarted = true;
+      // Set hover on touchstart for touch devices
+      this._hover = true;
+      document.addEventListener("click", this._documentClicked);
     });
     this.addEventListener("touchend", () => {
       setTimeout(() => {

src/panels/lovelace/types.ts

@@ -44,6 +44,7 @@ export interface Lovelace {
 
 export interface LovelaceBadge extends HTMLElement {
   hass?: HomeAssistant;
+  connectedWhileHidden?: boolean;
   setConfig(config: LovelaceBadgeConfig): void;
 }
 

yarn.lock

@@ -1940,9 +1940,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@home-assistant/webawesome@npm:3.0.0-ha.1":
-  version: 3.0.0-ha.1
-  resolution: "@home-assistant/webawesome@npm:3.0.0-ha.1"
+"@home-assistant/webawesome@npm:3.0.0-ha.2":
+  version: 3.0.0-ha.2
+  resolution: "@home-assistant/webawesome@npm:3.0.0-ha.2"
   dependencies:
     "@ctrl/tinycolor": "npm:4.1.0"
     "@floating-ui/dom": "npm:^1.6.13"
@@ -1953,7 +1953,7 @@ __metadata:
     lit: "npm:^3.2.1"
     nanoid: "npm:^5.1.5"
     qr-creator: "npm:^1.0.0"
-  checksum: 10/281f16c2c6c28d95a381de6fca05948a9c67d8184f20844d64ce33dc2caf9e6761d2cf8337b97e7487a71be011ab04f2a021b20b823a20e3c049cc68205de86a
+  checksum: 10/c94908d88c1e25604d148dfb375b3fb025fc838c9b9ee4aa729b7f111aef6ed45727158923d2d15e2def4b7c74057c2e779b358e90c98e6e0391b3020aa0391c
   languageName: node
   linkType: hard
 
@@ -9213,7 +9213,7 @@ __metadata:
     "@fullcalendar/list": "npm:6.1.19"
     "@fullcalendar/luxon3": "npm:6.1.19"
     "@fullcalendar/timegrid": "npm:6.1.19"
-    "@home-assistant/webawesome": "npm:3.0.0-ha.1"
+    "@home-assistant/webawesome": "npm:3.0.0-ha.2"
     "@lezer/highlight": "npm:1.2.3"
     "@lit-labs/motion": "npm:1.0.9"
     "@lit-labs/observers": "npm:2.0.6"