unovue / shadcn-vue

Vue port of shadcn-ui
https://www.shadcn-vue.com/
MIT License
5.35k stars 319 forks source link

[Bug]: FormFields lose initial values when mixed with accordions after closing #701

Closed pcaselas closed 3 months ago

pcaselas commented 3 months ago

Reproduction

https://stackblitz.com/edit/vitejs-vite-qwruhk

Describe the bug

Here's a snipped of code when using AutoForm (but happens the same with regular where the initial value appears after clicking the accordion, but as soon as I close it, and open it back, the values are gone.

I attach a video of the issue

https://github.com/user-attachments/assets/9feee279-d47f-4c7b-ad72-623dc4aa8df6


  <AutoForm
    class="w-2/3 space-y-6"
    :form="form"
    :schema="schema"
    @submit="onSubmit"
  >
    <Button type="submit"> Submit </Button>
  </AutoForm>

const schema = z.object({
  subObject: z.object({
    subField: z.string().optional(),
    numberField: z.number().optional(),

    subSubObject: z
      .object({
        subSubField: z.string(),
      })
      .describe("Sub Sub Object Description"),
  }),
  optionalSubObject: z
    .object({
      optionalSubField: z.string(),
      otherOptionalSubField: z.string(),
    })
    .optional(),
});
const initialValues = ref({
  subObject: {
    subField: "optional value",
    numberField: Math.floor(Math.random() * 100),
    subSubObject: {
      subSubField: "sub value for field",
    },
  },
  optionalSubObject: {
    optionalSubField: "optional value 1",
    otherOptionalSubField: "optional value 2 2",
  },
});
const form = useForm({
  validationSchema: toTypedSchema(schema),
  initialValues,
});

System Info

System:
    OS: macOS 14.3
    CPU: (12) arm64 Apple M3 Pro
    Memory: 101.69 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v18.19.1/bin/npm
    bun: 1.0.33 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 127.1.68.128
    Chrome Canary: 129.0.6642.0
    Edge: 127.0.2651.86
    Safari: 17.3
  npmPackages:
    @vueuse/core: ^10.11.0 => 10.11.0 
    radix-vue: ^1.9.3 => 1.9.3 
    vue: ^3.4.31 => 3.4.36

Contributes

sadeghbarati commented 3 months ago

You can use useForm, keepValuesOnUnmount: true option

See related https://github.com/radix-vue/shadcn-vue/issues/633#issuecomment-2250329520