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.

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

feat(Form): handle @error event #718

Merged
merged 15 commits into from
Oct 10, 2023
Merged

feat(Form): handle @error event #718

merged 15 commits into from
Oct 10, 2023

Conversation

albertcito
Copy link
Contributor

@albertcito albertcito commented Sep 21, 2023 •
edited
Loading

Issue: #715

❓ 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

  • Remove exception in customer side if validation fails.
  • If it fails the user can execute @error type: (value: FormSubmitEvent<T>) => void
  • Also I added focusOnFail props. To set the focus to the first element that contains an error. But only works if name is the same that state key

Resolves #715

📝 Checklist

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

nuxt#715 - onError and focus-on-fail
fada55f 
Also, I added custom Error to avoid thrown a real error.
@vercel
Copy link

vercel bot commented Sep 21, 2023 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
ui ✅ Ready (Inspect) Visit Preview Oct 10, 2023 1:45pm

romhml
romhml requested changes Sep 22, 2023
View reviewed changes
src/runtime/components/forms/Form.vue Outdated Show resolved Hide resolved
src/runtime/components/forms/Form.vue Outdated Show resolved Hide resolved
src/runtime/components/forms/Form.vue Outdated Show resolved Hide resolved
docs/content/3.forms/10.form.md Outdated Show resolved Hide resolved
@albertcito albertcito changed the title feat: onError and focus-on-fail props for Form component feat: onError props for Form component Sep 22, 2023
@albertcito
Copy link
Contributor Author

This code is ready to be review.

@romhml
Copy link
Collaborator

romhml commented Oct 7, 2023

@albertcito I made some changes to include the input identifier directly inside the error object, wdyt?

@benjamincanac benjamincanac changed the title feat: onError props for Form component feat(Form): handle @error event Oct 7, 2023
@albertcito
Copy link
Contributor Author

Looks great, simpler code.

benjamincanac
benjamincanac requested changes Oct 9, 2023
View reviewed changes
Copy link
Member

@benjamincanac benjamincanac left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just tried this and it seems that when the page is loaded on server-side, the id present in the errors array does not match the actual id of the element so it focuses the wrong input.

@romhml
Copy link
Collaborator

romhml commented Oct 9, 2023

The issue came from a silent hydration mismatch on the input identifier (c.f. nuxt/nuxt#14143 (comment)). I found a quick fix here 97ca4c5 which should do it for now.

A more elegant solution would be to find a way to make the uid function SSR friendly, but I could not figure it out yet.

@benjamincanac benjamincanac merged commit e16379f into nuxt:dev Oct 10, 2023
2 checks passed
@romhml romhml mentioned this pull request Oct 18, 2023
Closed
@yuelikestocode
Copy link

Used to be able to do @submit.prevent. Now it complains e.preventDefault is not a function.

Is this related? Looks like it's a breaking change of this release.

@benjamincanac Volta.net
Copy link
Member

@yuelikestocode The Form component already handles the prevent for you: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Form.vue#L2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@romhml romhml romhml approved these changes

@benjamincanac benjamincanac benjamincanac approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Focus input after error on submit
4 participants
@albertcito @romhml @yuelikestocode @benjamincanac