Loving the latest updates for UI Kit 2. I’ve been leaning pretty heavily into them with my app but ran into issues with the Form component and some other field types. It looks like Form is “adjusting” the data that gets serialised when submitting. I’ve been doing some debugging and noticed that react-hook-form
is used under the hood. I’ve tried it out standalone just using react-hook-form
and the native input[type="file"]
and input[type="url"]
fields and they submit correctly. When using the UI Kit 2 Form component though the values get lost.
I’ve got a reduced test case in this repo: https://bitbucket.org/heapsgoodsoftware/ui-kit-file-bug/src/main/
You can compare it to a pure use of react-hook-form
here: https://codesandbox.io/p/sandbox/events-test-tt6msm
If you add that custom field to a project, then click the “Hello World” (this was created using forge create
for a custom field) it’ll open the modal to adjust the value. Just attach a file and type in a url then hit submit. It’ll log the serialised data to the console. Notice that the values for screenshot and url both look like the event rather than the data. This isn’t the case with standard react-hook-form
.
It’d be awesome if someone could fix this as it’s the only bug holding up my app from going onto the marketplace
I did try a workaround of putting an onChange
handler onto the field but that didn’t work either — an the react-hook-form
docs cover this but you need to use their Controller component but that’s not exposed for us as part of Form (like the reset
method I mentioned in another topic). It’d be awesome that if you choose to lean into open source packages that you consider exporting all of their methods, not just some. It really limits what people can do with the packages and means more hacky workarounds (like what we had to do with reset
by adding another component to avoid the form state loss when re-rendering).