Fix x-model.parent when inside of x-teleport

packages/alpinejs/src/directives/x-model.js

@@ -5,12 +5,13 @@ import { mutateDom } from '../mutation'
 import { nextTick } from '../nextTick'
 import { isCloning } from '../clone'
 import on from '../utils/on'
+import { findClosest } from '../lifecycle'
 
 directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
     let scopeTarget = el
 
     if (modifiers.includes('parent')) {
-        scopeTarget = el.parentNode
+        scopeTarget = findClosest(el, (element) => element !== el)
     }
 
     let evaluateGet = evaluateLater(scopeTarget, expression)

packages/alpinejs/src/lifecycle.js

@@ -66,12 +66,7 @@ export function findClosest(el, callback) {
 
     if (callback(el)) return el
 
-    // Support crawling up teleports.
-    if (el._x_teleportBack) el = el._x_teleportBack
-
-    if (! el.parentElement) return
-
-    return findClosest(el.parentElement, callback)
+    return findClosest(el._x_teleportBack ?? el.parentElement, callback)
 }
 
 export function isRoot(el) {

tests/cypress/integration/directives/x-modelable.spec.js

@@ -68,3 +68,78 @@ test('x-modelable removes the event listener used by corresponding x-model',
         get('h2').should(haveText('foo'))
     }
 )
+
+test('works when inside x-teleport',
+    html`
+        <div x-data="{ outer: 'foo' }">
+            <template x-teleport="body">
+                <div x-data="{ inner: 'bar' }" x-modelable="inner" x-model="outer">
+                    <h1 x-text="outer"></h1>
+                    <h2 x-text="inner"></h2>
+
+                    <button @click="inner = 'bob'" id="1">change inner</button>
+                    <button @click="outer = 'lob'" id="2">change outer</button>
+                </div>
+            </template>
+        </div>
+    `,
+    ({ get }) => {
+        get('h1').should(haveText('foo'))
+        get('h2').should(haveText('foo'))
+        get('#1').click()
+        get('h1').should(haveText('bob'))
+        get('h2').should(haveText('bob'))
+        get('#2').click()
+        get('h1').should(haveText('lob'))
+        get('h2').should(haveText('lob'))
+    }
+)
+
+test('works when inside x-teleport when targeting parent',
+    html`
+        <div x-data="{ value: 'foo' }">
+            <h2 x-text="value"></h1>
+
+            <template x-teleport="body">
+                <div x-data="{ value: 'bar' }" x-modelable="value" x-model.parent="value">
+                    <h1 x-text="value"></h1>
+
+                    <button @click="value = 'bob'" id="1">change to bob</button>
+                    <button @click="value = 'lob'" id="2">change to lob</button>
+                </div>
+            </template>
+        </div>
+    `,
+    ({ get }) => {
+        get('h1').should(haveText('foo'))
+        get('h2').should(haveText('foo'))
+        get('#1').click()
+        get('h1').should(haveText('bob'))
+        get('h2').should(haveText('bob'))
+        get('#2').click()
+        get('h1').should(haveText('lob'))
+        get('h2').should(haveText('lob'))
+    }
+)
+
+test('works when inside x-teleport with x-data directly on it',
+    html`
+        <div>
+            <template x-teleport="body" x-data="{ value: 'foo' }">
+                <div x-data="{ value: 'bar' }" x-modelable="value" x-model.parent="value">
+                    <h1 x-text="value"></h1>
+
+                    <button @click="value = 'bob'" id="1">change to bob</button>
+                    <button @click="value = 'lob'" id="2">change to lob</button>
+                </div>
+            </template>
+        </div>
+    `,
+    ({ get }) => {
+        get('h1').should(haveText('foo'))
+        get('#1').click()
+        get('h1').should(haveText('bob'))
+        get('#2').click()
+        get('h1').should(haveText('lob'))
+    }
+)