From ff9af2f98086eb1754ce3bc8e343bcb7ee2d31e4 Mon Sep 17 00:00:00 2001
From: Wendelin <12148533+wendevlin@users.noreply.github.com>
Date: Thu, 26 Sep 2024 14:11:34 +0200
Subject: [PATCH] Fix delete appearance chip (#22098)

* Add filter option to ha-sortable

* Filter chips remove buttons from dragging in ha-entity-state-content-picker
---
 .../entity/ha-entity-state-content-picker.ts           |  1 +
 src/components/ha-sortable.ts                          | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/src/components/entity/ha-entity-state-content-picker.ts b/src/components/entity/ha-entity-state-content-picker.ts
index bdc75c9c3a2b..f80df1679fcb 100644
--- a/src/components/entity/ha-entity-state-content-picker.ts
+++ b/src/components/entity/ha-entity-state-content-picker.ts
@@ -173,6 +173,7 @@ class HaEntityStatePicker extends LitElement {
               no-style
               @item-moved=${this._moveItem}
               .disabled=${this.disabled}
+              filter="button.trailing.action"
             >
               <ha-chip-set>
                 ${repeat(
diff --git a/src/components/ha-sortable.ts b/src/components/ha-sortable.ts
index e86c32dd779a..8d784445ad70 100644
--- a/src/components/ha-sortable.ts
+++ b/src/components/ha-sortable.ts
@@ -43,6 +43,13 @@ export class HaSortable extends LitElement {
   @property({ type: String, attribute: "handle-selector" })
   public handleSelector?: string;
 
+  /**
+   * Selectors that do not lead to dragging (String or Function)
+   * https://github.com/SortableJS/Sortable?tab=readme-ov-file#filter-option
+   * */
+  @property({ type: String, attribute: "filter" })
+  public filter?: string;
+
   @property({ type: String })
   public group?: string | SortableInstance.GroupOptions;
 
@@ -145,6 +152,9 @@ export class HaSortable extends LitElement {
     if (this.group) {
       options.group = this.group;
     }
+    if (this.filter) {
+      options.filter = this.filter;
+    }
 
     this._sortable = new Sortable(container, options);
   }