fix(could not set 0 as value of checkbox because it was falsy)

mccarlosen · Sep 15, 2020 · 8996ec1 · 8996ec1
1 parent 241aff5
commit 8996ec1
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 4 deletions.
diff --git a/dist/alpine-ie11.js b/dist/alpine-ie11.js
@@ -6466,7 +6466,7 @@
         // If we are explicitly binding a string to the :value, set the string,
         // If the value is a boolean, leave it alone, it will be set to "on"
         // automatically.
-        if (value && typeof value !== 'boolean' && attrType === 'bind') {
+        if (typeof value !== 'boolean' && ![null, false, undefined].includes(value) && attrType === 'bind') {
           el.value = String(value);
         } else if (attrType !== 'bind') {
           if (Array.isArray(value)) {

diff --git a/dist/alpine.js b/dist/alpine.js
@@ -647,7 +647,7 @@
         // If we are explicitly binding a string to the :value, set the string,
         // If the value is a boolean, leave it alone, it will be set to "on"
         // automatically.
-        if (value && typeof value !== 'boolean' && attrType === 'bind') {
+        if (typeof value !== 'boolean' && ![null, false, undefined].includes(value) && attrType === 'bind') {
           el.value = String(value);
         } else if (attrType !== 'bind') {
           if (Array.isArray(value)) {

diff --git a/examples/index.html b/examples/index.html
@@ -110,6 +110,8 @@
                             <span x-text="JSON.stringify(checkbox)"></span>
                             <input type="checkbox" x-model="checkbox"
                                 value="foo">
+                                <input type="checkbox" x-model="checkbox"
+                                :value="0">
                             <input type="checkbox" x-model="checkbox"
                                 value="bar">
                             Radio:

diff --git a/src/directives/bind.js b/src/directives/bind.js
@@ -25,7 +25,7 @@ export function handleAttributeBindingDirective(component, el, attrName, express
             // If we are explicitly binding a string to the :value, set the string,
             // If the value is a boolean, leave it alone, it will be set to "on"
             // automatically.
-            if (value && typeof value !== 'boolean' && attrType === 'bind') {
+            if (typeof value !== 'boolean' && ! [null, undefined].includes(value) && attrType === 'bind') {
                 el.value = String(value)
             } else if (attrType !== 'bind') {
                 if (Array.isArray(value)) {

diff --git a/test/bind.spec.js b/test/bind.spec.js
@@ -512,8 +512,9 @@ test('attribute binding names can contain numbers', async () => {
 
 test('non-string and non-boolean attributes are cast to string when bound to checkbox', () => {
     document.body.innerHTML = `
-        <div x-data="{ number: 100, bool: true, nullProp: null }">
+        <div x-data="{ number: 100, zero: 0, bool: true, nullProp: null }">
             <input type="checkbox" id="number" :value="number">
+            <input type="checkbox" id="zero" :value="zero">
             <input type="checkbox" id="boolean" :value="bool">
             <input type="checkbox" id="null" :value="nullProp">
         </div>
@@ -522,6 +523,7 @@ test('non-string and non-boolean attributes are cast to string when bound to che
     Alpine.start()
 
     expect(document.querySelector('#number').value).toEqual('100')
+    expect(document.querySelector('#zero').value).toEqual('0')
     expect(document.querySelector('#boolean').value).toEqual('on')
     expect(document.querySelector('#null').value).toEqual('on')
 })