Merge pull request #1270 from SimoTod/bug/x-model-select-falsy-values

Fix x-model not selecting falsy values in select dropdown

dist/alpine-ie11.js

@@ -6715,7 +6715,7 @@
     Array.from(el.options).forEach(function (option) {
       _newArrowCheck(this, _this3);
 
-      option.selected = arrayWrappedValue.includes(option.value || option.text);
+      option.selected = arrayWrappedValue.includes(option.value);
     }.bind(this));
   }
 

dist/alpine.js

@@ -752,7 +752,7 @@
       return value + '';
     });
     Array.from(el.options).forEach(option => {
-      option.selected = arrayWrappedValue.includes(option.value || option.text);
+      option.selected = arrayWrappedValue.includes(option.value);
     });
   }
 

src/directives/bind.js

@@ -87,6 +87,6 @@ function updateSelect(el, value) {
     const arrayWrappedValue = [].concat(value).map(value => { return value + '' })
 
     Array.from(el.options).forEach(option => {
-        option.selected = arrayWrappedValue.includes(option.value || option.text)
+        option.selected = arrayWrappedValue.includes(option.value)
     })
 }

test/model.spec.js

@@ -746,3 +746,21 @@ test('x-model sets value before x-on directive expression is processed', async (
         expect(window.selectValueB).toEqual('bar')
     })
 })
+
+test('x-model select falsy values on select dropdown', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo: '' }">
+            <select x-model="foo">
+                <option disabled value="">Please select one</option>
+                <option>bar</option>
+                <option>baz</option>
+            </select>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelectorAll('option')[0].selected).toEqual(true)
+    expect(document.querySelectorAll('option')[1].selected).toEqual(false)
+    expect(document.querySelectorAll('option')[2].selected).toEqual(false)
+})