Hidden Fields not submitting with Fetcher

[sgrund14]

Hello! I have a remix-forms Form setup like so

<Form
          fetcher={requestFetcher}
          schema={processConditionReportSchema}
          action={`${API_REMIX_PREFIX}/condition-report`}
          method="post"
          mode="onSubmit"
          hiddenFields={['conditionEventType']}
          values={{
            conditionEventType: 'requested',
          }}
        >

It works great except for the fact that the hidden conditionEventType field is not being sent to the action -- only the inputs that are registered with the register function from react-hook-forms are

Am I doing something wrong here?

[danielweinmann]

Do you have a <Field name="conditionEventType" /> inside your Form's children?

[sgrund14]

added <Field /> and it worked, thanks!

however, now I'm running into a new issue

I'm trying to decorate all my form components with a hidden field which we want across all of our forms, like so

const BaseForm = createForm({
  component: FrameworkForm,
  useNavigation,
  useSubmit,
  useActionData,
});

function Form({ values, hiddenFields, ...props }: FormProps<FormSchema>) {
  const { userId } = useUserContext() || {};
  return (
    <BaseForm
      {...props}
      values={{ ...values, 'x-user-id': userId }}
      hiddenFields={[...(hiddenFields || []), 'x-user-id']}
      beforeChildren={
        <input type="hidden" name="x-user-id" value={userId ?? ''} />
      }
    />
  );
}

export { Form };

then in consumer:

<Form
          fetcher={requestFetcher}
          schema={schema}
          action={REQUEST_ACTION}
          method="post"
          mode="onSubmit"
          hiddenFields={['conditionEventType'} 
          values={{
            conditionEventType: 'requested',
          }}
        >

but when I try to use the form, it seems like it's not getting wired up correctly, mainly. the form is not submitting to REQUEST_ACTION which gets passed into the consumer, which I can fix by telling the requestFetcher to use that action. but seems strange, because in the DOM, the form has the correct action...

[danielweinmann]

That's a strange behavior. I can't see why creating this abstraction would make the action stop working. While we figure things out, a few things I noticed in your code:

function Form({ values, hiddenFields, ...props }: FormProps<FormSchema>) should be function Form<Schema extends FromSchema>({ values, hiddenFields, ...props }: FormProps<Schema>) and then you should render <BaseForm<Schema> ... to make all the type-safety work with your custom schemas.

Also, because the x-user-id field won't be part of your form's schema and you won't call register for it, you don't need to add it to the values or hiddenFields props. It should work by just rendering it on the beforeChildren prop.

Lastly, isn't sending the user id as a hidden input on the form a security breach? Unless you have an additional layer of security on your action (which would make sending the user unnecessary), anyone could use the browser inspector to submit things as a different user. Am I missing something here?

[sgrund14]

ah, got it, thanks!

yea, this is just a temporary solution in a dev environment while a more robust auth solution is being worked on. won't be the case once it goes to prod. but good catch 🫡

[danielweinmann]

Awesome! About the action being wrong: if you use BaseForm instead of Form and pass beforeChildren to it, does it work?

[sgrund14]

hmm, strange -- it does not work! however, I'm pretty sure it used to so I'll try to replicate

so now I'm required to pass the action the fetcher before it's given to the form as prop