Fix x-model setting .value instead of .checked on checkboxes

Author: ganyicz

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

@@ -155,10 +155,23 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
         // If nested model key is undefined, set the default value to empty string.
         if (value === undefined && typeof expression === 'string' && expression.match(/\./)) value = ''
 
-        // @todo: This is nasty
-        window.fromModel = true
-        mutateDom(() => bind(el, 'value', value))
-        delete window.fromModel
+        mutateDom(() => {
+            if (isCheckbox(el)) {
+                if (Array.isArray(value)) {
+                    el.checked = value.some(val => val == el.value)
+                } else {
+                    el.checked = !!value
+                }
+            } else if (isRadio(el)) {
+                if (typeof value === 'boolean') {
+                    el.checked = safeParseBoolean(el.value) === value
+                } else {
+                    el.checked = el.value == value
+                }
+            } else {
+                bind(el, 'value', value)
+            }
+        })
     }
 
     effect(() => {

packages/alpinejs/src/utils/bind.js

@@ -46,15 +46,6 @@ function bindInputValue(el, value) {
         if (el.attributes.value === undefined) {
             el.value = value
         }
-
-        // @todo: yuck
-        if (window.fromModel) {
-            if (typeof value === 'boolean') {
-                el.checked = safeParseBoolean(el.value) === value
-            } else {
-                el.checked = checkedAttrLooseCompare(el.value, value)
-            }
-        }
     } else if (isCheckbox(el)) {
         // If we are explicitly binding a string to the :value, set the string,
         // If the value is a boolean/array/number/null/undefined, leave it alone, it will be set to "on"

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

@@ -660,3 +660,18 @@ test('x-model.blur syncs value before form submit handler runs',
     }
 )
 
+test('x-model with dotted expression does not overwrite checkbox submission value',
+    html`
+    <div x-data="{ form: { agree: undefined } }">
+        <input type="checkbox" name="agree" x-model="form.agree">
+    </div>
+    `,
+    ({ get }) => {
+        get('input').should(haveValue('on'))
+        get('input').should(notBeChecked())
+        get('input').check()
+        get('input').should(beChecked())
+        get('input').should(haveValue('on'))
+    }
+)
+