Compatibility with Shadcn

[vanities]

Does this package have compatibility with shadcn? I was looking through the issues, but didn't see anything regarding that.

For example, something like this:

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "~/components/ui/form";

...
            <Form {...form}>
              <form
                onSubmit={form.handleSubmit}
                method="POST"
                className="space-y-6"
              >
...

etc. gives the error:

Type '{ children: Element; handleSubmit: (e?: any) => Promise<void>; reset: (values?: { otp: string; } | { otp?: string | undefined; } | undefined, options?: Partial<{ keepDirtyValues: boolean; ... 9 more ...; keepSubmitCount: boolean; }> | undefined) => void; ... 12 more ...; setFocus: UseFormSetFocus<...>; }' is not assignable to type 'UseFormReturn<{ otp: string; }, any, undefined>'.
  The types returned by 'handleSubmit(...)' are incompatible between these types.
    Type 'Promise<void>' is not assignable to type '(e?: any) => Promise<void>'.
      Type 'Promise<void>' provides no match for the signature '(e?: any): Promise<void>'.

It's probably that I'm misusing this library.

[ArvidAnderson]

From my experience, basic components like Input and Select from shadcn/ui work fine, but you can't use their specific form components as shown in your snippet. I've had success following the Remix hook form documentation instead of using shadcn/ui's form components directly.

[Sutikshan]

you may need to utilise RemixFormProvider .
example impl https://github.com/Sutikshan/tess-fs/blob/main/web/app/routes/provider.organization.tsx#L112

[genox]

I followed the example you posted but I can't get regular shadcn errors to show, the form always tries to show native form validation errors. Do you know how to disable this behaviour @Sutikshan ?

I set shouldUseNativeValidation: false, but this seems to have no effect.

edit: Nevermind, the issue was that I tried to be DRY and wrap the shad components to have less duplication but I guess that context gets lots along the way.

[AlemTuzlak]

Shadcn UI Form component is just FormProvider from react-hook-form with extra steps. This is not compatible with remix-hook-form as the package itself offers RemixFormProvider instead. Also, you should not use the regular form element but the react-router v7 Form element as the normal form one does not have the correct behavior when JS is enabled.

I'll switch this issue to discussion also