Field component not works as expected with radio buttons having boolean as a value

[lilisgeorge]

Versions

• vee-validate@4.0.2
• vue@3.0.4

I have the following schema

const formSchema = {
  validation: yup.object().shape({
    data: yup.object().shape({
      attributes: yup.object().shape({
        name: yup.string().required().max(255),
        private_space: yup.boolean().required(),
      }),
    }),
  }),
  values: {
    data: {
      attributes: {
        name: 'lorem',
        private_space: true,
      },
    },
  },
};

In the template I have the following fields

<Field
  v-slot="{ field }"
  name="data.attributes.private_space"
  >
  <label>
      <input
      type="radio"
      name="data.attributes.private_space"
      v-bind="field"
      :value="false"
      >
      Public
  </label>
</Field>
<Field
  v-slot="{ field }"
  name="data.attributes.private_space"
  >
  <label>
      <input
      type="radio"
      name="data.attributes.private_space"
      v-bind="field"
      :value="true"
      >
      Private
  </label>
</Field>

The expected behavior is to have Public field selected by default. None is selected when form is displayed.

When selecting an option I expect to have data.attributes.private_space value equal to true or false boolean.
What happens is having string "false" in either case.

if I update my template and add handleChange scoped function as the following sample

<Field
  v-slot="{ field, handleChange }"
  name="data.attributes.private_space"
  >
  <label>
      <input
      type="radio"
      name="data.attributes.private_space"
      v-bind="field"
      :value="false"
      @change="(e) => handleChange(true)"
      >
      Public
  </label>
</Field>
<Field
  v-slot="{ field, handleChange }"
  name="data.attributes.private_space"
  >
  <label>
      <input
      type="radio"
      name="data.attributes.private_space"
      v-bind="field"
      :value="true"
      @change="(e) => handleChange(true)"
      >
      Private
  </label>
</Field>

I still dont have the default value selected by default. However when I select a value it is setting the correct value which means I get a boolean value on data.attributes.private_space

Finally if use the documented example:

<Field name="data.attributes.private_space" type="radio" :value="false"</Field> Public
<Field name="data.attributes.private_space" type="radio" :value="true"</Field> Private

I get the default value selected when form is displayed however when i change my selection it sets a stringified version of the boolean. If I select true the value is set to "true" if I select false the value is set to "false".

Desktop

• OS: Ubuntu 20.04 subsystem on Windows 10 (WSL2)
• Browser chrome
• Version latest

[logaretm]

Thanks for reporting this, after I took a look the only issue is that the values are not being cast correctly. I have addressed it a few seconds ago.

---

When using the Field component scoped slots, you still need to provide a type and a value to the Field component itself, this is because it cannot infer the input type from the template nor its value. Which is why the shorthand works correctly.

So in order for the default value to be selected correctly, you need to provide type and value props on the Field node:

<Field
  v-slot="{ field, handleChange }"
  name="data.attributes.private_space"
  type="radio"
  :value="false"
>

I realize this isn't mentioned in the docs, so I will add it promptly and deploy the value type fix.