From 99035cea8fb2676a14da92434bfebdc6c7cb9c4b Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Tue, 8 Oct 2024 21:04:45 +0200
Subject: [PATCH] Fix drag and drop when using action and trigger selector
 (#22291)

* Fix drag and drop when using action selector

* Fix drag and drop when using trigger selector
---
 .../ha-selector/ha-selector-action.ts           | 17 ++++++++++-------
 .../ha-selector/ha-selector-trigger.ts          | 17 ++++++++++-------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/ha-selector/ha-selector-action.ts b/src/components/ha-selector/ha-selector-action.ts
index 23d93a2a29..1e96086796 100644
--- a/src/components/ha-selector/ha-selector-action.ts
+++ b/src/components/ha-selector/ha-selector-action.ts
@@ -4,7 +4,7 @@ import memoizeOne from "memoize-one";
 import { Action, migrateAutomationAction } from "../../data/script";
 import { ActionSelector } from "../../data/selector";
 import "../../panels/config/automation/action/ha-automation-action";
-import { HomeAssistant } from "../../types";
+import { HomeAssistant, ItemPath } from "../../types";
 
 @customElement("ha-selector-action")
 export class HaActionSelector extends LitElement {
@@ -18,19 +18,22 @@ export class HaActionSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
-  private _actions = memoizeOne((action: Action | undefined) => {
-    if (!action) {
-      return [];
+  // Add path here to ignore memoize if the path changes
+  private _actions = memoizeOne(
+    (action: Action | undefined, _path?: ItemPath) => {
+      if (!action) {
+        return [];
+      }
+      return migrateAutomationAction(action);
     }
-    return migrateAutomationAction(action);
-  });
+  );
 
   protected render() {
     return html`
       ${this.label ? html`<label>${this.label}</label>` : nothing}
       <ha-automation-action
         .disabled=${this.disabled}
-        .actions=${this._actions(this.value)}
+        .actions=${this._actions(this.value, this.selector.action?.path)}
         .hass=${this.hass}
         .path=${this.selector.action?.path}
       ></ha-automation-action>
diff --git a/src/components/ha-selector/ha-selector-trigger.ts b/src/components/ha-selector/ha-selector-trigger.ts
index 0974a31702..2bddf4ffd9 100644
--- a/src/components/ha-selector/ha-selector-trigger.ts
+++ b/src/components/ha-selector/ha-selector-trigger.ts
@@ -4,7 +4,7 @@ import memoizeOne from "memoize-one";
 import { migrateAutomationTrigger, Trigger } from "../../data/automation";
 import { TriggerSelector } from "../../data/selector";
 import "../../panels/config/automation/trigger/ha-automation-trigger";
-import { HomeAssistant } from "../../types";
+import { HomeAssistant, ItemPath } from "../../types";
 
 @customElement("ha-selector-trigger")
 export class HaTriggerSelector extends LitElement {
@@ -18,19 +18,22 @@ export class HaTriggerSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
-  private _triggers = memoizeOne((trigger: Trigger | undefined) => {
-    if (!trigger) {
-      return [];
+  // Add path here to ignore memoize if the path changes
+  private _triggers = memoizeOne(
+    (trigger: Trigger | undefined, _path?: ItemPath) => {
+      if (!trigger) {
+        return [];
+      }
+      return migrateAutomationTrigger(trigger);
     }
-    return migrateAutomationTrigger(trigger);
-  });
+  );
 
   protected render() {
     return html`
       ${this.label ? html`<label>${this.label}</label>` : nothing}
       <ha-automation-trigger
         .disabled=${this.disabled}
-        .triggers=${this._triggers(this.value)}
+        .triggers=${this._triggers(this.value, this.selector.trigger?.path)}
         .hass=${this.hass}
         .path=${this.selector.trigger?.path}
       ></ha-automation-trigger>