Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix(Form)!: don't mutate the form's state if transformations are enabled #4902

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 13 commits into from
Sep 17, 2025
Merged

fix(Form)!: don't mutate the form's state if transformations are enabled #4902

merged 13 commits into from
Sep 17, 2025

Conversation

romhml
Copy link
Member

@romhml romhml commented Sep 7, 2025 •
edited
Loading

🔗 Linked issue

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR is trying to solve issues with mutating the form's state when applying schema transformations. Transformations are now only returned in the @submit callback, leaving the original state untouched.

These changes introduces a breaking change to adapts the implementation of nested forms and keep including their transformed state in the parent's form @submit handler.

Nested forms will now have to provide the name prop similar to the UFormField component. The attach prop has also be renamed to nested and must be enabled explicitly.

Before:

<template>
  <UForm :state="state" :schema="schema" @submit="onSubmit">
    <UFormField label="Customer" name="customer">
      <UInput v-model="state.customer" placeholder="Wonka Industries" />
    </UFormField>

    <UForm
      v-for="item, count in state.items"
      :key="count"
      :state="item" <!-- This will be replaced by the name prop -->
      :schema="itemSchema"
    >
      <UFormField :label="!count ? 'Description' : undefined" name="description">
        <UInput v-model="item.description" />
      </UFormField>
      <UFormField :label="!count ? 'Price' : undefined" name="price" class="w-20">
        <UInput v-model="item.price" type="number" />
      </UFormField>
    </UForm>
    </div>
  </UForm>
</template>

After:

<template>
  <UForm :state="state" :schema="schema" @submit="onSubmit">
    <UFormField label="Customer" name="customer">
      <UInput v-model="state.customer" placeholder="Wonka Industries" />
    </UFormField>

    <UForm
      v-for="item, count in state.items"
      :key="count"
      :name="`name.${count}`" <!-- Name is used to get / set the parent state instead -->
      :schema="itemSchema"
      nested <!-- Nested forms must now be enabled explicitly -->
    >
      <UFormField :label="!count ? 'Description' : undefined" name="description">
        <UInput v-model="item.description" />
      </UFormField>
      <UFormField :label="!count ? 'Price' : undefined" name="price" class="w-20">
        <UInput v-model="item.price" type="number" />
      </UFormField>
    </UForm>
    </div>
  </UForm>
</template>

📝 Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@github-actions github-actions bot added the v4 #4488 label Sep 7, 2025
@romhml romhml changed the title fix(Form)!: don't mutate the form's state if transformations are enabled fix(Form)!: don't mutate the form's state if transformations are enabled (wip) Sep 7, 2025
@romhml romhml marked this pull request as draft September 7, 2025 14:09
@romhml romhml changed the title fix(Form)!: don't mutate the form's state if transformations are enabled (wip) fix(Form)!: don't mutate the form's state if transformations are enabled Sep 7, 2025
@romhml romhml force-pushed the fix/form-transform branch 2 times, most recently from 85617f5 to 2f3acf1 Compare September 7, 2025 14:27
@romhml romhml force-pushed the fix/form-transform branch from 2f3acf1 to 75f737f Compare September 7, 2025 14:29
romhml
romhml commented Sep 13, 2025
View reviewed changes
@pkg-pr-new
Copy link

pkg-pr-new bot commented Sep 13, 2025 •
edited
Loading 

npm i https://pkg.pr.new/@nuxt/ui@4902

commit: 21e5b03

romhml
romhml commented Sep 13, 2025
View reviewed changes
romhml
romhml commented Sep 13, 2025
View reviewed changes
romhml
romhml commented Sep 13, 2025
View reviewed changes
@romhml romhml marked this pull request as ready for review September 14, 2025 14:03
@benjamincanac benjamincanac merged commit 99dbe81 into v4 Sep 17, 2025
26 of 27 checks passed
@benjamincanac benjamincanac deleted the fix/form-transform branch September 17, 2025 08:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@benjamincanac benjamincanac benjamincanac approved these changes

@genu genu genu approved these changes

Assignees

No one assigned

Labels

v4 #4488

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@romhml @benjamincanac @genu