How to clear inputs on successful submission

[MoSattler]

I want to clear my input fields on successful submission, as described here.

For that, I need access to the form ref, which I don't have, as I am using useForm, which passes it's own ref I don't have access to.

What would be the proper way to go about this?

[edmundhung]

Hi @MoSattler, you can pass your own ref to useForm like this:

function Example() {
  const ref = useRef<HTMLFormElement>(null);
  const [form, { email, password }] = useForm({
    ref,
  });

  // `form.ref / form.props.ref` will now be the same as `ref`

  return (
    <form {...form.props}>
      {/* ... */}
    </form>
  );
}

I should add this to the docs. Thanks for the question!

[MoSattler]

Thanks for your answer!

I tried this

  const formRef = useRef<HTMLFormElement>(null);
  
  const [form, fields] = useForm({
    id: "some-id",
    ref: formRef,
    constraint: schema,
    lastSubmission: actionData?.submission,
    onValidate({ formData }) {
      return parse(formData, { schema: schema });
    },
    shouldRevalidate: "onBlur",
  });
  
  useEffect(() => {
    if (navigation.state === 'idle' && actionData?.success) {
      formRef.current?.reset();
    }
  }, [actionData?.success, merchants, navigation.state])

  <label htmlFor={fields.name.id}>
  <input. {...input(fields.name, { type: "text" })} />

but the form does not really seem to reset. The values remain.

Should this be working in theory, and maybe I have a bug on my side?

[edmundhung]

It looks like there is a regression from 0.6.2 on how defaultValue is handled 🤦🏼 .

For now, please do this:

const [form, fields] = useForm({
    id: "some-id",
    ref: formRef,
    // Note 1: You should use getFieldsetConstraint(schema) instead
    constraint: schema,
    // Note 2: Pass the last submission only if the action is not successful
    lastSubmission: !actionData?.success ? actionData?.submission : undefined,
    onValidate({ formData }) {
      return parse(formData, { schema: schema });
    },
    shouldRevalidate: "onBlur",
});

This is just a temporary fix. I will make sure this is fixed on the next version.

[MoSattler]

Thank you so much @edmundhung !

On a sidenote: what's lastSubmission for?

[edmundhung]

The lastSubmission is used for:

1. Reporting errors from the server
2. Progressive enhancement. It allows Conform to persist the previous form data and adjust the form default value based on it. This is what went wrong in your case and cause the reset failed.

However, I just realize the solution above is actually better. As it allows Conform to handles the NoJS situation correctly (i.e. have the form value reset without JS).

After #170 is released, Conform will handle the form reset for you. All you need is to decide when to pass the lastSubmission as shown in the PR.

[DKeen0123]

Any idea why this isn't working with useFetcher?

export function ChatEditor({ chat }: { chat?: ChatWithMessages | null }) {
	const chatFetcher = useFetcher<typeof action>()
	const isPending = chatFetcher.state !== 'idle'
	const [form, fields] = useForm({
		id: 'chat-editor',
		constraint: getFieldsetConstraint(ChatEditorSchema),
		lastSubmission:
			chatFetcher?.data?.status !== 'success'
				? chatFetcher.data?.submission
				: undefined,
		onValidate({ formData }) {
			return parse(formData, { schema: ChatEditorSchema })
		},
		defaultValue: {
			title: chat?.title ?? '',
			content: '',
		},
	})

	return (
		<div>
			<Form
				method="post"
				className="flex h-full flex-col gap-y-4 overflow-y-auto overflow-x-hidden px-10 pt-12"
				{...form.props}
				encType="multipart/form-data"
			>
				<AuthenticityTokenInput />
				<button type="submit" className="hidden" />
				{chat ? <input type="hidden" name="id" value={chat.id} /> : null}
				<div className="flex w-full items-end gap-1">
					<TextareaFieldWithSubmit
						className="w-full"
						labelProps={{ children: 'Content' }}
						textareaProps={{
							...conform.textarea(fields.content, { ariaAttributes: true }),
						}}
						errors={fields.content.errors}
						isPending={isPending}
					/>
				</div>
				<ErrorList id={form.errorId} errors={form.errors} />
			</Form>
		</div>
	)
}```

[EmilEinarsen]

You're using the Form element instead of the fetcher Form element.
Try doing this:
<chatFetcher.Form>