toTypedSchema makes handleSubmit.withControlled include all values

[tobiasstr]

What happened?

First of all, love the project!

I think i may have found a minor issue, but it may also be me just misunderstanding and doing something wrong.

Given a setup like this:

const validationSchema = toTypedSchema(
  yup.object({
    name: yup.string().required(),
  })
)

const initialValues = {
  name: '',
  deletedAt: null, // no input exists for this
}

const { handleSubmit, controlledValues } = useForm({ validationSchema, initialValues })

If I have a single child input component with useField('name'), I find that controlledValues only contains name, but the values argument provided in handleSubmit.withControlled contains both name and deletedAt.

Not sure if this is intended, but if I don't use a validation schema, or if I use a schema directly without toTypedSchema, this inconsistency stops. Maybe I have to use yup default values and not initial values in combination with toTypedSchema, but I still find it a bit odd that they don't match.

Reproduction steps

1. Create a simple input component

<script setup lang="ts">
import { useField } from 'vee-validate'

const props = defineProps<{ name: string }>()

const { value, errors } = useField(() => props.name)
</script>

<template>
  <div>
    <label :for="name">{{ name }}</label>
    <input v-model="value" :id="name" type="text" />
    <span>{{ errors }}</span>
  </div>
</template>

2. Create a simple form component

<script setup lang="ts">
import { toTypedSchema } from '@vee-validate/yup'
import { useForm } from 'vee-validate'
import * as yup from 'yup'
import SampleInput from './SampleInput.vue'

const validationSchema = toTypedSchema(
  yup.object({
    name: yup.string().required(),
    description: yup.string().required()
  })
)

const initial = { name: '', description: '', deletedAt: null, doNotWant: 'this' }

const { handleSubmit, controlledValues } = useForm({
  validationSchema,
  initialValues: initial
})

const onSubmit = handleSubmit.withControlled((values) => {
  // Submitted with foo + bar

  // { name: 'foo', description: 'bar', deletedAt: null, doNotWant: 'this' }
  console.log('submitting', values)

  // { name: 'foo', description: 'bar' }
  console.log('controlledValues', controlledValues.value)
})
</script>

<template>
  <form @submit="onSubmit">
    <SampleInput name="name"></SampleInput>
    <SampleInput name="description"></SampleInput>
    <button type="submit">Submit</button>
  </form>
</template>

3. Submit the form and check logs

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

https://stackblitz.com/edit/vitejs-vite-yq9jxqbt?file=src%2Fcomponents%2FSampleForm.vue

Code of Conduct

• I agree to follow this project's Code of Conduct