Add <form> compatibility
#1214
Add <form> compatibility
#1214
Conversation
If we are working with more complex data structures then we have to
encode those data structures into a syntax that the HTML can understand.
This means that we have to use `<input type="hidden" name="..." value="...">` syntax.
To convert a simple array we can use the following syntax:
```js
// Assuming we have a `name` of `person`
let input = ['Alice', 'Bob', 'Charlie']
```
Results in:
```html
<input type="hidden" name="person[]" value="Alice" />
<input type="hidden" name="person[]" value="Bob" />
<input type="hidden" name="person[]" value="Charlie" />
```
Note: the additional `[]` in the name attribute.
---
A more complex object (even deeply nested) can be encoded like this:
```js
// Assuming we have a `name` of `person`
let input = {
id: 1,
name: {
first: 'Jane',
last: 'Doe'
}
}
```
Results in:
```html
<input type="hidden" name="person[id]" value="1" />
<input type="hidden" name="person[name][first]" value="Jane" />
<input type="hidden" name="person[name][last]" value="Doe" />
```
|
This pull request is being automatically deployed with Vercel (learn more). headlessui-vue – ./packages/playground-vue🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-vue/EyfCz9ANczaHPLSquEXTaogHPDjx headlessui-react – ./packages/playground-react🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-react/EMcsk8GYFtyTm3FVQSawN5xDERAY |
RobinMalfait
force-pushed
the
form-compatibility
branch
from
5ae1686
to
d949ae0
Compare
RobinMalfait
force-pushed
the
form-compatibility
branch
from
d949ae0
to
63b1f7c
Compare
RobinMalfait
force-pushed
the
form-compatibility
branch
from
63b1f7c
to
6675a2f
Compare
|
nice! 👌 |
|
Hey @RobinMalfait, I ran into 2 challenges when I was converting an existing React app to Remix, which does fully embrace
The only work around I have for this challenge is to: keep a select value in a state, then use the state as the value of a hidden input. Out of curiosity, what prompted the @RobinMalfait - do you have any recommendations/considerations tips for other react component library creators as far as how to approach this? I plan on knowledge sharing with the Ant design core team about this |
This PR will add
<form>compatibility.We have a few form element related components:
The issue is that you manually have to wire these components to form input if
you want them to be included when you submit your form.
This PR will make that a bit easier for you. On the component listed above, you
can now add a
nameprop, once you do that a hidden input field will berendered with the selected value.
If your data (for example the
valueof yourListbox.Option) is an object, then we will make sure to properly encode it. Here is an example:Results in:
Note: the additional
[]in the name attribute.A more complex object (even deeply nested) can be encoded like this:
Results in: