From f9addca5e9bf7f5d73cee78887cc2d5cc8149965 Mon Sep 17 00:00:00 2001
From: Simone Todaro <simo.todaro@gmail.com>
Date: Sun, 22 Dec 2024 22:27:25 +0000
Subject: [PATCH] Add support for [x-sort:handle] attributes defined in
 template tags

---
 packages/sort/src/index.js                    |  4 ++-
 .../cypress/integration/plugins/sort.spec.js  | 31 +++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/sort/src/index.js b/packages/sort/src/index.js
index fccc7382e..349013006 100644
--- a/packages/sort/src/index.js
+++ b/packages/sort/src/index.js
@@ -25,7 +25,9 @@ export default function (Alpine) {
 
         let preferences = {
             hideGhost: ! modifiers.includes('ghost'),
-            useHandles: !! el.querySelector('[x-sort\\:handle]'),
+            useHandles: (!! el.querySelector('[x-sort\\:handle]')) || Array.from(el.querySelectorAll('template')).some(
+                tmpl => !! tmpl.content.querySelector('[x-sort\\:handle]')
+            ),
             group: getGroupName(el, modifiers),
         }
 
diff --git a/tests/cypress/integration/plugins/sort.spec.js b/tests/cypress/integration/plugins/sort.spec.js
index 4394a4dba..ccf7013df 100644
--- a/tests/cypress/integration/plugins/sort.spec.js
+++ b/tests/cypress/integration/plugins/sort.spec.js
@@ -49,6 +49,11 @@ test.skip('can use a custom handle',
         get('ul li').eq(0).should(haveText('handle - foo'))
         get('ul li').eq(1).should(haveText('handle - bar'))
 
+        get('#1').drag('#2').then(() => {
+            get('ul li').eq(0).should(haveText('handle - foo'))
+            get('ul li').eq(1).should(haveText('handle - bar'))
+        })
+
         get('#1 span').drag('#2').then(() => {
             get('ul li').eq(0).should(haveText('handle - bar'))
             get('ul li').eq(1).should(haveText('handle - foo'))
@@ -56,6 +61,32 @@ test.skip('can use a custom handle',
     },
 )
 
+test('can use a custom handle with x-for',
+    [html`
+        <div x-data="{items: ['1', '2']}">
+            <ul x-sort>
+                <template x-for="item in items" :key="item">
+                    <li :id="item"><span x-sort:handle>handle</span> - <span x-text="item"></span></li>
+                </template>
+            </ul>
+        </div>
+    `],
+    ({ get }) => {
+        get('ul li').eq(0).should(haveText('handle - 1'))
+        get('ul li').eq(1).should(haveText('handle - 2'))
+
+        get('#1').drag('#2').then(() => {
+            get('ul li').eq(0).should(haveText('handle - 1'))
+            get('ul li').eq(1).should(haveText('handle - 2'))
+        })
+
+        get('#1 span').eq(0).drag('#2').then(() => {
+            get('ul li').eq(0).should(haveText('handle - 2'))
+            get('ul li').eq(1).should(haveText('handle - 1'))
+        })
+    },
+)
+
 test.skip('can move items between groups',
     [html`
         <div x-data>