I'm facing a kind of weird situation. I've got the following form:
<script> import RecordForm from "../../../components/forms/RecordForm.svelte"; /* data returned from load function in +page.server.js */ export let data; /* data returned from actions function in +page.server.js */ export let form;</script><RecordForm mode="edit" formData={ {...data, ...form} }/>
Nothing out of ordinary here. This is an edit form so I'm simply combining data
(which is the info the form is first loaded with) and form
(which is the data returned from the submit action).
When the form is first loaded all the fields in it are populated as expected.
When the form is submitted and errors are found, then the action returns the formData
as expected and it is passed to the form, now, most fields are populated except two.
The weird part is the following: After noticing that those fields were not being populated, I created a div
on top of them and placed the same statement there that the one in the input field. That div
displays the correct data (see screeenshot).
My form uses use:enhance
, when I remove it, it behaves correctly.
Here is one of the fields:
<!-- Title --><div class="basis-1/2 form-control w-full"><label class="label"><span class="label-text">Title <span class="required-field">*</span></span></label><div>HERE {formData?.data?.title}</div><input name="title" id="title" type="text" value={ formData?.data?.title || "" } class="input input-bordered w-full max-w-xs"/><label for="title" class="label"> {#if formData?.errors?.title}<span class="label-text-alt text-error">{ formData?.errors?.title[0]}</span> {/if}</label></div>
Again, notice that<div>HERE {formData?.data?.title}</div>
displays the correct data whilevalue={ formData?.data?.title || "" }
isn't showing anything.
If I print the data
object returned from the action it shows the correct data:
{ data: { barcode: '101010101010111', title: 'Test Record', original_release_year: '2008', original_release_date: '', reissue_release_date: '' }}
Any idea what's going on? I already tried shutting down the dev server (sometimes the auto refresh doesn't work as expected) but still getting the same result.
NOTE: It is happening for all input values of type text, type number works fine.
Somehow it works for number input fields such as:
<input name="owned_copies" id="owned-copies" type="number" value={ formData?.data?.owned_copies || 1 } class="input input-bordered w-full max-w-xs" />