Use conform for updating search params

[lennerd]

Hey everybody,

I'm looking for a way to use useForm and the corresponding fields in a controlled way. My scenario:

• I have conform-powered filter form on a lister page. On every change (onChange) I submit the form via method="GET".
• This way the loader gets called and data inside the lister is updated. The submission result is passed back as a last result to the useForm hook. So far so good.
• If we use the browser navigation or some link which in turn updated the filter state, the corresponding items for the lister and the submission result, the form is not updated.

I tried different approaches, but conform seems not to have a way to use it in a controlled way without loosing focus inside the field elements. No matter how I try to force conform to update itself from the last submission result, the updates won't have any effects on the form itself.

Does anybody else have this problem? Do you use conform to build filter forms?

[chimame]

Can you provide sample code to help us understand your issue? It would be easier to understand if you could provide some code.

[chimame]

I was mistaken. You mean that the list is not in the form, but that the state of the list changes with the value of the form. And do you want to clear the form after running loader?

If so, try this. #606

return { result: submission.reply({ resetForm: true }), items };

[lennerd]

Exactly! The filter form is responsible for controlling the filtering of list items.

However, I’d like to ensure that the form values stay in sync with the search params. Specifically:

• When the form changes, the search params should update accordingly.
• When the search params change (e.g., due to navigation), the form should reflect these updates.

I'm looking for a way to achieve this with a controlled useForm hook.

Something like this:

return { result: submission.reply({ value: filter }), items }; 

[chimame]

In that case why not use defaultValue?

export async function loader({ request }: Route.LoaderArgs) {
  ...
  return {
    default: submission.status === "success" ? submission.value : null,
    result: submission.reply({ resetForm: true }),
    items,
  };
}

export default function Lister({ loaderData }: Route.ComponentProps) {
  return (
    <div>
      <FilterForm lastResult={loaderData.result} defaultValue={loaderData.default} />
      {loaderData.items.map((item) => (
          // List items ...
      ))}
    </div>
  );
}

type Props = {
  lastResult: SubmissionResult;
  defaultValue: <your filter type> | null;
}
function FilterForm({ lastResult, defaultValue }: Props) {
  const [form, fields] = useForm({
    onValidate: ({ formData }) => parseWithZod(formData, { schema: filterSchema }),
    lastResult,
    defaultValue,
  });

  return (
    <Form
      {...getFormProps(form)}
      onChange={(event) => {
        event.currentTarget.requestSubmit();
      }}
    >
      {/* Filter fields ... */}
    </Form>
  );
}

[lennerd]

I've already tried this using useEffect and form.reset, but your approach is much cleaner.

Unfortunately, this resets the key of every field and form element, causing issues like:

• Losing focus when typing into an input field.
• Resetting the state of accordions and other components, as their keys change along with the form component.

[chimame]

The sample code you provided still loses focus. It's not caused by using defaultValue.
I think it will work if you define the input tag like this, without using getInputProps.

function FilterForm({ lastResult, defaultValue }: Props) {
  const [form, fields] = useForm({
    onValidate: ({ formData }) => parseWithZod(formData, { schema: filterSchema }),
    lastResult,
    defaultValue,
  });

  return (
    <Form
      {...getFormProps(form)}
      onChange={(event) => {
        event.currentTarget.requestSubmit();
      }}
    >
      <input
        name={fields.<your-attribute-name>.name}
        defaultValue={fields.<your-attribute-name>.initialValue}
        type='text'
      />
    </Form>
  );
}