From 63d134d922c39a7c076fdc1f2de8ebe298590196 Mon Sep 17 00:00:00 2001
From: Asad Ali <42726454+dmp990@users.noreply.github.com>
Date: Sun, 27 Sep 2026 20:11:00 +0100
Subject: [PATCH] Fix x-model sync for grouped dynamic options

---
 packages/alpinejs/src/directives/x-model.js   |  2 +-
 packages/docs/src/en/directives/model.md      | 22 ++++++++-----
 .../integration/directives/x-model.spec.js    | 31 +++++++++++++++++++
 3 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/packages/alpinejs/src/directives/x-model.js b/packages/alpinejs/src/directives/x-model.js
index 770a12417..480851668 100644
--- a/packages/alpinejs/src/directives/x-model.js
+++ b/packages/alpinejs/src/directives/x-model.js
@@ -184,7 +184,7 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
             el._x_forceModelUpdate(getValue())
         })
 
-        observer.observe(el, { childList: true })
+        observer.observe(el, { childList: true, subtree: true })
 
         cleanup(() => observer.disconnect())
     }
diff --git a/packages/docs/src/en/directives/model.md b/packages/docs/src/en/directives/model.md
index 07476ded9..5341fd3b9 100644
--- a/packages/docs/src/en/directives/model.md
+++ b/packages/docs/src/en/directives/model.md
@@ -259,13 +259,17 @@ Colors: <span x-text="color"></span>
 <!-- END_VERBATIM -->
 
 <a name="dynamically-populated-select-options"></a>
-### Dynamically populated Select Options
+### Dynamically populated select options
+
+`x-model` keeps the selection synchronized when options are added or removed dynamically, including options nested inside an `<optgroup>`.
 
 ```alpine
 <select x-model="color">
-    <template x-for="color in ['Red', 'Orange', 'Yellow']">
-        <option x-text="color"></option>
-    </template>
+    <optgroup label="Colors">
+        <template x-for="color in ['Red', 'Orange', 'Yellow']">
+            <option x-text="color"></option>
+        </template>
+    </optgroup>
 </select>
 
 Color: <span x-text="color"></span>
@@ -273,11 +277,13 @@ Color: <span x-text="color"></span>
 
 <!-- START_VERBATIM -->
 <div class="demo">
-    <div x-data="{ color: '' }">
+    <div x-data="{ color: 'Orange' }">
         <select x-model="color">
-            <template x-for="color in ['Red', 'Orange', 'Yellow']">
-                <option x-text="color"></option>
-            </template>
+            <optgroup label="Colors">
+                <template x-for="color in ['Red', 'Orange', 'Yellow']">
+                    <option x-text="color"></option>
+                </template>
+            </optgroup>
         </select>
 
         <div class="pt-4">Color: <span x-text="color"></span></div>
diff --git a/tests/cypress/integration/directives/x-model.spec.js b/tests/cypress/integration/directives/x-model.spec.js
index 4933a34e3..b55bc14fc 100644
--- a/tests/cypress/integration/directives/x-model.spec.js
+++ b/tests/cypress/integration/directives/x-model.spec.js
@@ -738,6 +738,37 @@ test('x-model initializes multiple select values rendered with x-for', html`
     get('option[value="Yellow"]').should('be.selected')
 })
 
+test('x-model initializes select values rendered with x-for inside an optgroup', html`
+    <div x-data="{ color: 'Orange' }">
+        <select x-model="color">
+            <optgroup label="Colors">
+                <template x-for="color in ['Red', 'Orange', 'Yellow']">
+                    <option :value="color" x-text="color"></option>
+                </template>
+            </optgroup>
+        </select>
+    </div>
+`, ({ get }) => {
+    get('select').should(haveValue('Orange'))
+})
+
+test('x-model re-syncs when x-for adds a matching option inside an optgroup', html`
+    <div x-data="{ colors: ['Red', 'Blue'], color: 'Green' }">
+        <select x-model="color">
+            <optgroup label="Colors">
+                <template x-for="colorOption in colors" :key="colorOption">
+                    <option :value="colorOption" x-text="colorOption"></option>
+                </template>
+            </optgroup>
+        </select>
+
+        <button @click="colors = ['Orange', 'Green']">Change</button>
+    </div>
+`, ({ get }) => {
+    get('button').click()
+    get('select').should(haveValue('Green'))
+})
+
 test('x-model does not fire change handlers when x-for options initialize', html`
     <div x-data="{ color: 'Orange', changes: 0 }">
         <select x-model="color" @change="changes++">