Fix fill modifier for radio buttons (#4101)

* Add failing test * Move ternary into the if statements * Assign the target value to a variable * Only use new value for radio buttons that are checked
alpinejs · Mar 21, 2024 · ebffaa7 · ebffaa7
1 parent 4590592
commit ebffaa7
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 5 deletions.
diff --git a/packages/alpinejs/src/directives/x-model.js b/packages/alpinejs/src/directives/x-model.js
@@ -170,13 +170,27 @@ function getInputValue(el, modifiers, event, currentValue) {
                 return option.value || option.text
             })
         } else {
+            let newValue
+
+            if (el.type === 'radio') {
+                if (event.target.checked) {
+                    newValue = event.target.value
+                } else {
+                    newValue = currentValue
+                }
+            } else {
+                newValue = event.target.value
+            }
+
             if (modifiers.includes('number')) {
-                return safeParseNumber(event.target.value)
+                return safeParseNumber(newValue)
             } else if (modifiers.includes('boolean')) {
-                return safeParseBoolean(event.target.value)
+                return safeParseBoolean(newValue)
+            } else if (modifiers.includes('trim')) {
+                return newValue.trim()
+            } else {
+                return newValue
             }
-
-            return modifiers.includes('trim') ? event.target.value.trim() : event.target.value
         }
     })
 }

diff --git a/tests/cypress/integration/directives/x-model.spec.js b/tests/cypress/integration/directives/x-model.spec.js
@@ -234,7 +234,7 @@ test('x-model with fill modifier takes input value on null, empty string or unde
     }
 )
 
-test('x-model with fill modifier works with select/radio elements',
+test('x-model with fill modifier works with select elements',
     html`
         <div x-data="{ a: null, b: null, c: null, d: null }">
             <select x-model.fill="a">
@@ -253,6 +253,35 @@ test('x-model with fill modifier works with select/radio elements',
     }
 );
 
+test('x-model with fill modifier works with radio elements',
+    html`
+        <div x-data="{ a: null, b: null, c: '101112', d: null }">
+            <input x-model.fill="a" type="radio" value="123" />
+            <input x-model.fill="a" type="radio" value="456" checked />
+            <input x-model.fill="a" type="radio" value="789" />
+            <input x-model.fill="a" type="radio" value="101112" />
+            <input x-model.fill="a" type="radio" value="131415" />
+
+            <input x-model.fill="b" name="b" type="radio" value="123" />
+            <input x-model.fill="b" name="b" type="radio" value="456" />
+            <input x-model.fill="b" name="b" type="radio" value="789" checked />
+            <input x-model.fill="b" name="b" type="radio" value="101112" />
+            <input x-model.fill="b" name="b" type="radio" value="131415" />
+
+            <input x-model.fill="c" type="radio" value="123" />
+            <input x-model.fill="c" type="radio" value="456" />
+            <input x-model.fill="c" type="radio" value="789" />
+            <input x-model.fill="c" type="radio" value="101112" />
+            <input x-model.fill="c" type="radio" value="131415" />
+        </div>
+    `,
+    ({ get }) => {
+        get('[x-data]').should(haveData('a', '456'));
+        get('[x-data]').should(haveData('b', '789'));
+        get('[x-data]').should(haveData('c', '101112'));
+    }
+);
+
 test('x-model with fill modifier respects number modifier',
     html`
         <div x-data="{ a: null, b: null, c: null, d: null }">