Fix x-ref crash during child-element morph

Wrap x-ref's inline handler with skipDuringClone() to prevent TypeError
when morph runs on a child element (not the x-data root). During morph,
cloneNode() runs directives on detached elements where closestRoot()
returns undefined. Refs re-register on live DOM via MutationObserver.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: calebporzio

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

@@ -1,16 +1,20 @@
 import { closestRoot } from '../lifecycle'
+import { skipDuringClone } from '../clone'
 import { directive } from '../directives'
 
 function handler () {}
 
-handler.inline = (el, { expression }, { cleanup }) => {
+// Skip during clone because morph runs directives on detached elements
+// where closestRoot() has no x-data ancestor. Refs re-register on the
+// live DOM via the MutationObserver path after morph patches attributes.
+handler.inline = skipDuringClone((el, { expression }, { cleanup }) => {
     let root = closestRoot(el)
 
     if (! root._x_refs) root._x_refs = {}
 
     root._x_refs[expression] = el
 
     cleanup(() => delete root._x_refs[expression])
-}
+})
 
 directive('ref', handler)

tests/cypress/integration/plugins/morph.spec.js

@@ -1,4 +1,4 @@
-import { haveAttribute, haveLength, haveText, haveValue, haveHtml, html, test } from '../../utils'
+import { haveAttribute, haveFocus, haveLength, haveText, haveValue, haveHtml, html, test } from '../../utils'
 
 test('can morph components and preserve Alpine state',
     [html`
@@ -1099,3 +1099,36 @@ test('morph properly closes dialog opened with showModal()',
         get('#outside').click()
     },
 )
+
+test('can morph child element containing x-ref without crashing',
+    [html`
+        <div x-data="{ value: 'initial' }">
+            <section>
+                <input x-ref="myInput" x-model="value">
+                <button @click="$refs.myInput.focus()">Focus</button>
+                <span x-text="value"></span>
+            </section>
+        </div>
+    `],
+    ({ get }, reload, window, document) => {
+        get('span').should(haveText('initial'))
+
+        // Morph a CHILD element (section), not the x-data root
+        get('section').then(([el]) => {
+            window.Alpine.morph(el, `
+                <section>
+                    <input x-ref="myInput" x-model="value">
+                    <button @click="$refs.myInput.focus()">Focus</button>
+                    <span x-text="value"></span>
+                </section>
+            `)
+        })
+
+        // State should be preserved
+        get('span').should(haveText('initial'))
+
+        // Verify $refs still resolves after morph
+        get('button').click()
+        get('input').should(haveFocus())
+    },
+)