feat: cast single checkboxes values to booleans closes #2889

logaretm · Sep 5, 2020 · 7a08184 · 7a08184
1 parent 822b1bf
commit 7a08184
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/core/src/utils/events.ts b/packages/core/src/utils/events.ts
@@ -24,6 +24,12 @@ export function normalizeEventValue(value: unknown): any {
   }
 
   const input = value.target as HTMLInputElement;
+  // Vue sets the current bound value on `_value` prop
+  // for checkboxes it it should fetch the value binding type as is (boolean instead of string)
+  if (input.type === 'checkbox' && '_value' in input) {
+    return (input as any)._value;
+  }
+
   if (input.type === 'file' && input.files) {
     return Array.from(input.files);
   }

diff --git a/packages/core/tests/Form.spec.ts b/packages/core/tests/Form.spec.ts
@@ -418,7 +418,7 @@ describe('<Form />', () => {
     await flushPromises();
     expect(err.textContent).toBe('');
   });
-  
+
   test('supports radio inputs with check after submit', async () => {
     console.log('radios');
     const initialValues = { test: 'one' };
@@ -520,7 +520,7 @@ describe('<Form />', () => {
     expect(values.textContent).toBe(['Coke', ''].toString());
   });
 
-  test('supports a singular checkbox', async () => {
+  test('supports a single checkbox', async () => {
     const wrapper = mountWithHoc({
       setup() {
         const schema = {
@@ -536,13 +536,15 @@ describe('<Form />', () => {
         <Field name="drink" as="input" type="checkbox" :value="true" /> Coffee
 
         <span id="err">{{ errors.drink }}</span>
+        <span id="value">{{ typeof values.drink }}</span>
 
         <button>Submit</button>
       </VForm>
     `,
     });
 
     const err = wrapper.$el.querySelector('#err');
+    const value = wrapper.$el.querySelector('#value');
     const input = wrapper.$el.querySelector('input');
 
     wrapper.$el.querySelector('button').click();
@@ -551,9 +553,11 @@ describe('<Form />', () => {
     setChecked(input, true);
     await flushPromises();
     expect(err.textContent).toBe('');
+    expect(value.textContent).toBe('boolean');
     setChecked(input, false);
     await flushPromises();
     expect(err.textContent).toBe(REQUIRED_MESSAGE);
+    expect(value.textContent).toBe('undefined');
   });
 
   test('unmounted fields gets unregistered and their values cleaned up', async () => {