Fix: use deep quality check for checkbox values #3883 (#3885)

Author: logaretm

packages/vee-validate/src/useField.ts

@@ -436,7 +436,9 @@ function useCheckboxField<TValue = unknown>(
       const currentValue = unref(field.value);
       const checkedVal = unref(checkedValue);
 
-      return Array.isArray(currentValue) ? currentValue.includes(checkedVal) : checkedVal === currentValue;
+      return Array.isArray(currentValue)
+        ? currentValue.findIndex(v => isEqual(v, checkedVal)) >= 0
+        : isEqual(checkedVal, currentValue);
     });
 
     function handleCheckboxChange(e: unknown, shouldValidate = true) {

packages/vee-validate/src/utils/common.ts

@@ -1,5 +1,6 @@
-import { isIndex, isNullOrUndefined, isObject, toNumber } from '../../../shared';
 import { getCurrentInstance, inject, InjectionKey, warn as vueWarning } from 'vue';
+import isEqual from 'fast-deep-equal';
+import { isIndex, isNullOrUndefined, isObject, toNumber } from '../../../shared';
 import { isContainerValue, isEmptyContainer, isNotNestedPath } from './assertions';
 import { PrivateFieldContext } from '../types';
 
@@ -169,13 +170,14 @@ export function resolveNextCheckboxValue<T>(currentValue: T[], checkedValue: T,
 export function resolveNextCheckboxValue<T>(currentValue: T | T[], checkedValue: T, uncheckedValue: T) {
   if (Array.isArray(currentValue)) {
     const newVal = [...currentValue];
-    const idx = newVal.indexOf(checkedValue);
+    // Use isEqual since checked object values can possibly fail the equality check #3883
+    const idx = newVal.findIndex(v => isEqual(v, checkedValue));
     idx >= 0 ? newVal.splice(idx, 1) : newVal.push(checkedValue);
 
     return newVal;
   }
 
-  return currentValue === checkedValue ? uncheckedValue : checkedValue;
+  return isEqual(currentValue, checkedValue) ? uncheckedValue : checkedValue;
 }
 
 // https://github.com/bameyrick/throttle-typescript

packages/vee-validate/tests/Form.spec.ts

@@ -1207,6 +1207,57 @@ describe('<Form />', () => {
     expect(values.textContent).toBe(['Coke', ''].toString());
   });
 
+  test('checkboxes with object values', async () => {
+    const wrapper = mountWithHoc({
+      setup() {
+        const schema = yup.object({
+          drink: yup.array().required().min(1),
+        });
+
+        return {
+          schema,
+        };
+      },
+      template: `
+      <VForm :validation-schema="schema" v-slot="{ errors, values }">
+        <Field name="drink" as="input" type="checkbox" :value="{ id: '' }" /> Coffee
+        <Field name="drink" as="input" type="checkbox" :value="{ id: 'tea' }" /> Tea
+        <Field name="drink" as="input" type="checkbox" :value="{ id: 'coke' }" /> Coke
+
+        <span id="err">{{ errors.drink }}</span>
+        <span id="values">{{ JSON.stringify(values.drink) }}</span>
+
+        <button>Submit</button>
+      </VForm>
+    `,
+    });
+
+    const err = wrapper.$el.querySelector('#err');
+    const values = wrapper.$el.querySelector('#values');
+    const inputs = wrapper.$el.querySelectorAll('input');
+
+    wrapper.$el.querySelector('button').click();
+    await flushPromises();
+    expect(err.textContent).toBe('drink is a required field');
+    setChecked(inputs[2]);
+    await flushPromises();
+    expect(err.textContent).toBe('');
+
+    setChecked(inputs[0]);
+    await flushPromises();
+    expect(err.textContent).toBe('');
+
+    setChecked(inputs[1]);
+    await flushPromises();
+    expect(err.textContent).toBe('');
+
+    expect(values.textContent).toBe(JSON.stringify([{ id: 'coke' }, { id: '' }, { id: 'tea' }]));
+
+    setChecked(inputs[1], false);
+    await flushPromises();
+    expect(values.textContent).toBe(JSON.stringify([{ id: 'coke' }, { id: '' }]));
+  });
+
   test('checkboxes v-model value syncing', async () => {
     const drinks = ref<string[]>([]);
     const wrapper = mountWithHoc({