edmundhung / conform

A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
https://conform.guide
MIT License
1.8k stars 101 forks source link

Update intent-button.md, use `getInputProps` #750

Open willhoney7 opened 3 weeks ago

willhoney7 commented 3 weeks ago

I was about to open up a bug report because I couldn't get the insert intent to work correctly when setting a defaultValue, but then I realized it's because the input needs to use getInputProps. I had copied from the example here, so here's a simple PR to update the example to use getInputProps.

update: The complex structures page should probably receive some edits as well. https://conform.guide/complex-structures

changeset-bot[bot] commented 3 weeks ago

⚠️ No Changeset found

Latest commit: d41b50b64eefaec1f7c0ae4ab3e4d312077bb179

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

pkg-pr-new[bot] commented 3 weeks ago

commit: d41b50b

@conform-to/dom

``` pnpm add https://pkg.pr.new/@conform-to/dom@750 ```

@conform-to/react

``` pnpm add https://pkg.pr.new/@conform-to/react@750 ```

@conform-to/validitystate

``` pnpm add https://pkg.pr.new/@conform-to/validitystate@750 ```

@conform-to/yup

``` pnpm add https://pkg.pr.new/@conform-to/yup@750 ```

@conform-to/zod

``` pnpm add https://pkg.pr.new/@conform-to/zod@750 ```

Open in Stackblitz

More templates

- [@conform-example/chakra-ui](https://pkg.pr.new/template/6f7fb65b-f4e3-49e0-aff4-379459fc0b47) - [@conform-example/headless-ui](https://pkg.pr.new/template/9caf8cdf-79c0-440d-acd2-bf4b1786e946) - [@conform-example/material-ui](https://pkg.pr.new/template/574c2cc7-a7ff-4961-b415-bd972470677a) - [@conform-example/nextjs](https://pkg.pr.new/template/f86aa4ea-6d4e-4d7b-8624-7a05c0d9c540) - [@conform-example/radix-ui](https://pkg.pr.new/template/a8f90af5-779a-4dd1-9b28-96e2c38a7fe3) - [@conform-example/react-router](https://pkg.pr.new/template/708800cd-31ae-40cc-8a78-0a419eccdd51) - [@conform-example/remix](https://pkg.pr.new/template/6321bdc0-9638-4ee5-91f9-fd7688b46130) - [@conform-example/shadcn-ui](https://pkg.pr.new/template/b8206183-0b08-4b35-80e1-625fd8ef781d)

edmundhung commented 3 weeks ago

Hi @willhoney7, sorry for the confusion. If you need to be able to update a field, the minimal setup as of v1.1.5 would be <input key={task.key} name={task.name} defaultValue={task.initialValue} /> which is what getInputProps does for you.

Having said that, this is no longer true once #729 is landed, in which <input name={task.name} /> is enough as long as you don't care about full document reload (progressive enhancement).

There is a pre-release version in the PR above. Feel free to give it a try and let me know if you run into any problems.

I am likely gonna leave this unmerged so I don't need to revert it later. But I will keep the PR open until the change is landed. Thanks again for putting this up!