Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[V4] radio with nested fields doesn't taken initial values #2906

Closed
bzd2000 opened this issue Sep 19, 2020 · 0 comments · Fixed by #2907
Closed

[V4] radio with nested fields doesn't taken initial values #2906

bzd2000 opened this issue Sep 19, 2020 · 0 comments · Fixed by #2907

Comments

@bzd2000
Copy link
Contributor

bzd2000 commented Sep 19, 2020

Versions

  • vee-validate: 4.0.0-alpha.13
  • vue: 3.0.0

Describe the bug
In case of a radio group with nested fields (but i think also with non-nested fields), the initialValues are not taken into account.

To reproduce
This test case fails:

test('supports radio inputs with check after submit (nested)', async () => {
    const initialValues = { test: { fieldOne: 'one' } };

    const showFields = ref(true);
    const result = ref();

    const wrapper = mountWithHoc({
      setup() {
        const values = ['one', 'two', 'three'];
        const onSubmit = (formData: Record<string, any>) => {
          result.value = formData.test;
        };

        return {
          values,
          onSubmit,
          initialValues,
          showFields,
          result,
        };
      },
      template: ` 
      <VForm  @submit="onSubmit" :initialValues="initialValues" >
      
      <label v-for="(value, index) in values" v-bind:key="index">
              <div v-if="showFields">

        <Field name="test.fieldOne" as="input" type="radio" :value="value" /> {{value}}
        </div>
              </label>
    
        <button>Submit</button>
        <div>{{$result}}</div>
      </VForm>
    `,
    });

    // const err = wrapper.$el.querySelector('#err');
    const inputs = wrapper.$el.querySelectorAll('input');
    await flushPromises();
    expect(inputs[0].checked).toBe(true);

    setChecked(inputs[1]);
    await flushPromises();
    wrapper.$el.querySelector('button').click();
    await flushPromises();
    showFields.value = false;
    await flushPromises();
    expect(result.value.fieldOne).toBe('two');
  });

Expected behavior
InitialValues are taken in to account.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants