fix: use event value if no checked value for checkbox/radio closes #4308

logaretm · Jun 6, 2023 · f1dc135 · f1dc135
1 parent d4fafc9
commit f1dc135
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 5 deletions.
diff --git a/.changeset/lazy-years-mate.md b/.changeset/lazy-years-mate.md
@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+fix: use event value if no checked value for checkbox/radio closes #4308
diff --git a/packages/vee-validate/src/useField.ts b/packages/vee-validate/src/useField.ts
@@ -518,12 +518,11 @@ function useFieldWithChecked<TValue = unknown>(
       const path = toValue(name);
       const pathState = form?.getPathState(path);
       const value = normalizeEventValue(e);
-      let newValue!: TValue;
+      let newValue = unref(checkedValue) ?? value;
       if (form && pathState?.multiple && pathState.type === 'checkbox') {
-        newValue = resolveNextCheckboxValue(getFromPath(form.values, path) || [], value, undefined) as TValue;
-      } else {
-        // Single checkbox field without a form to toggle it's value
-        newValue = resolveNextCheckboxValue(unref(field.value), unref(checkedValue), unref(uncheckedValue)) as TValue;
+        newValue = resolveNextCheckboxValue(getFromPath(form.values, path) || [], newValue, undefined) as TValue;
+      } else if (opts?.type === 'checkbox') {
+        newValue = resolveNextCheckboxValue(unref(field.value), newValue, unref(uncheckedValue)) as TValue;
       }
 
       handleChange(newValue, shouldValidate);

diff --git a/packages/vee-validate/tests/Form.spec.ts b/packages/vee-validate/tests/Form.spec.ts
@@ -3150,3 +3150,46 @@ test('unmounted fields should not be validated when keep-values is on', async ()
   };
   expect(spy).toHaveBeenLastCalledWith(expected);
 });
+
+// #4308
+test('radio fields with single field component binding', async () => {
+  const submit = vi.fn();
+  const model = ref('');
+  const wrapper = mountWithHoc({
+    setup() {
+      return {
+        onSubmit: submit,
+        model,
+      };
+    },
+    template: `
+      <VForm @submit="onSubmit">
+        <Field name="drink" type="radio" v-model="model" v-slot="{ field }">
+          <input type="radio" value="Coffee" v-bind="field" />
+          <input type="radio" value="Tea" v-bind="field" />
+        </Field>
+
+        <button>Submit</button>
+      </VForm>
+    `,
+  });
+
+  const inputs = wrapper.$el.querySelectorAll('input');
+  const button = wrapper.$el.querySelector('button');
+
+  wrapper.$el.querySelector('button').click();
+  await flushPromises();
+
+  setChecked(inputs[0]);
+  await flushPromises();
+  button.click();
+  await flushPromises();
+  expect(model.value).toBe('Coffee');
+  expect(submit).toHaveBeenLastCalledWith({ drink: 'Coffee' }, expect.anything());
+  setChecked(inputs[1]);
+  await flushPromises();
+  button.click();
+  await flushPromises();
+  expect(model.value).toBe('Tea');
+  expect(submit).toHaveBeenLastCalledWith({ drink: 'Tea' }, expect.anything());
+});