Feature request
Current Behavior
Right now, there is no way to give a Field
or a SmartInput
an autoComplete
prop, e.g. autoComplete="username"
.
Let's say you have a custom Input
configured and a Zod schema
like this:
import { forwardRef } from 'react';
import type { FormProps } from 'remix-forms';
import { Form as RemixForm } from 'remix-forms';
import type { SomeZodObject } from 'zod';
import { z } from 'zod';
const Input = forwardRef<HTMLInputElement, JSX.IntrinsicElements['input']>(
({ type = 'text', ...props }, reference) => (
<input
className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
ref={reference}
type={type}
{...props}
/>
),
);
const Form = <Schema extends SomeZodObject>(props: FormProps<Schema>) => (
<RemixForm<Schema>
className="space-y-8 divide-y divide-gray-200"
inputComponent={Input}
{...props}
/>
);
const schema = z.object({
firstName: z.string().min(1),
email: z.string().min(1).email(),
})
And you want to have an input with an autoComplete
property, you have to render it like this:
<Field className="sm:col-span-3" name="firstName">
{({ Label, Errors }) => (
<>
<Label>First name</Label>
<Input
{...register('firstName')}
autoComplete="given-name"
/>
<Errors />
</>
)}
</Field>
<Field className="sm:col-span-3" name="emailAddress">
{({ Label, Errors }) => (
<>
<Label>Email address</Label>
<Input
{...register('emailAddress')}
autoComplete="email"
/>
<Errors />
</>
)}
</Field>
This renders using SmartInput
as well as configuring inputComponent
on the Form
useless in these cases.
Desired Behavior
Ideally, we could give the Field
or the SmartInput
the autoComplete
property, so we could render:
<Field className="sm:col-span-3" name="firstName">
{({ Label, SmartInput, Errors }) => (
<>
<Label>First name</Label>
<SmartInput autoComplete="given-name" />
<Errors />
</>
)}
</Field>
<Field autoComplete="email" className="sm:col-span-3" name="emailAddress" />
(Note that in this case, we could also render firstName
straight up as a Field
, but I wanted to show the "Custom Field, standard components" version, too.)
We also have to consider this for the Form
's renderField
prop, e.g.:
renderField={({ Field, autoComplete, ...props }) => {
const { name } = props;
return (
<Field key={name as string} {...props}>
{({ Label, SmartInput, Errors }) => (
<>
<Label />
<div className="mt-1">
<SmartInput autoComplete={autoComplete} />
</div>
<Errors />
</>
)}
</Field>
);
}}
Alternatives
Alternatively, maybe there is a way to infer the autoComplete
prop from the schema
for certain all the keys that are possible autoComplete
values.