diff --git a/.changeset/swift-hands-spend.md b/.changeset/swift-hands-spend.md new file mode 100644 index 000000000000..fb9692f6e480 --- /dev/null +++ b/.changeset/swift-hands-spend.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +fix: remote forms with default values defined by `field.as('text', defaultValue)` now correctly reset to the provided default values once submitted diff --git a/packages/kit/src/exports/public.d.ts b/packages/kit/src/exports/public.d.ts index ec2093d56166..36f8825db80f 100644 --- a/packages/kit/src/exports/public.d.ts +++ b/packages/kit/src/exports/public.d.ts @@ -1929,6 +1929,7 @@ type InputElementProps = T extends 'checkbox' | 'r 'aria-invalid': boolean | 'false' | 'true' | undefined; get checked(): boolean; set checked(value: boolean); + readonly defaultChecked?: boolean; } : T extends 'file' ? { @@ -1959,6 +1960,7 @@ type InputElementProps = T extends 'checkbox' | 'r 'aria-invalid': boolean | 'false' | 'true' | undefined; get value(): string | number; set value(v: string | number); + readonly defaultValue?: string | number; } : { name: string; @@ -1966,6 +1968,7 @@ type InputElementProps = T extends 'checkbox' | 'r 'aria-invalid': boolean | 'false' | 'true' | undefined; get value(): string | number; set value(v: string | number); + readonly defaultValue?: string | number; }; type RemoteFormFieldMethods = { diff --git a/packages/kit/src/runtime/form-utils.js b/packages/kit/src/runtime/form-utils.js index 79df9e6f49a2..3e26146d2032 100644 --- a/packages/kit/src/runtime/form-utils.js +++ b/packages/kit/src/runtime/form-utils.js @@ -666,7 +666,7 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat if (prop === 'as') { /** * @param {string} type - * @param {string} [input_value] + * @param {unknown} [input_value] */ const as_func = (type, input_value) => { const is_array = @@ -736,6 +736,12 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat if (type === 'checkbox' && !is_array) { return Object.defineProperties(base_props, { + defaultChecked: { + enumerable: true, + get() { + return input_value; + } + }, checked: { enumerable: true, get() { @@ -806,6 +812,12 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat // Handle all other input types (text, number, etc.) return Object.defineProperties(base_props, { + defaultValue: { + enumerable: true, + get() { + return input_value; + } + }, value: { enumerable: true, get() { diff --git a/packages/kit/test/apps/async/src/routes/remote/form/as-value/+page.svelte b/packages/kit/test/apps/async/src/routes/remote/form/as-value/+page.svelte index 870860270a8e..996d6b08398b 100644 --- a/packages/kit/test/apps/async/src/routes/remote/form/as-value/+page.svelte +++ b/packages/kit/test/apps/async/src/routes/remote/form/as-value/+page.svelte @@ -13,13 +13,7 @@
{#each values as value (value.id)} -
{ - // TODO: needed to keep the values when JS is enabled, remove when reset is implemented - submit(); - })} - > + diff --git a/packages/kit/test/apps/async/src/routes/remote/form/as-value/form.remote.ts b/packages/kit/test/apps/async/src/routes/remote/form/as-value/form.remote.ts index 25cc1bd7f72c..193d842e52da 100644 --- a/packages/kit/test/apps/async/src/routes/remote/form/as-value/form.remote.ts +++ b/packages/kit/test/apps/async/src/routes/remote/form/as-value/form.remote.ts @@ -45,6 +45,7 @@ export const as_value_form = form(ValueSchema, async (data) => { element.color_field = data.color_field; element.range_field = data.range_field; element.checkbox_field = data.checkbox_field; + await get_values().refresh(); } }); diff --git a/packages/kit/types/index.d.ts b/packages/kit/types/index.d.ts index 8f0bdea39d56..3d258ea60a60 100644 --- a/packages/kit/types/index.d.ts +++ b/packages/kit/types/index.d.ts @@ -1903,6 +1903,7 @@ declare module '@sveltejs/kit' { 'aria-invalid': boolean | 'false' | 'true' | undefined; get checked(): boolean; set checked(value: boolean); + readonly defaultChecked?: boolean; } : T extends 'file' ? { @@ -1933,6 +1934,7 @@ declare module '@sveltejs/kit' { 'aria-invalid': boolean | 'false' | 'true' | undefined; get value(): string | number; set value(v: string | number); + readonly defaultValue?: string | number; } : { name: string; @@ -1940,6 +1942,7 @@ declare module '@sveltejs/kit' { 'aria-invalid': boolean | 'false' | 'true' | undefined; get value(): string | number; set value(v: string | number); + readonly defaultValue?: string | number; }; type RemoteFormFieldMethods = {