I found an issue trying to use react-hook-form to validate the form, works with input

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Type error with react-hook-form (Select component) about material-tailwind HOT 2 OPEN

bryanlundberg commented on June 5, 2024

Type error with react-hook-form (Select component)

from material-tailwind.

Comments (2)

fredrikgustn commented on June 5, 2024

I have a similar issue that seems to be related to the react version. I have the same issue with the provided sample pro templates where it's not possible to build however it works when running in developer mode.

Depending on which react version that I use, I can get different results and different incopability problems. This is what I get when I use the default version from the blog-tailwind-nextjs sample project. I tested it to first rule out problem in my own code.

./src/app/blog-posts.tsx:39:8
Type error: Type '{ children: string; color: "gray"; className: string; size: "sm"; }' is missing the following properties from type 'Pick<ButtonProps, "children" | "color" | "translate" | "slot" | "style" | "title" | "onChange" | "onClick" | "className" | "key" | "defaultChecked" | "defaultValue" | ... 261 more ... | "loading">': placeholder, onPointerEnterCapture, onPointerLeaveCapture

  37 |   return (
  38 |     <section className="w-full max-w-6xl mx-auto flex flex-col items-center px-4 py-20">
> 39 |       <Button color="gray" className="mb-3" size="sm">
     |        ^
  40 |         BLOG
  41 |       </Button>
  42 |       <Typography variant="h3" className="text-center" color="blue-gray">

from material-tailwind.

unloop commented on June 5, 2024

@bryanlundberg You need to add controller on top of component from react-hook-form.

import { FC } from "react";
import { Controller, FormProvider, useForm } from "react-hook-form";
import { Option, Select } from "@material-tailwind/react";

export interface IProps {
}

export const ProfileForm: FC<IProps> = () => {
  const methods = useForm();

  async function onSubmit(data: any) {
    console.log("Submit:", data);
  }

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <Controller
          name="data"
          control={methods.control}
          render={({ field: { onChange, value } }) => (
            <Select
              name="data"
              label="Select value"
              value={value}
              onChange={onChange}>
              <Option value="demo1">Demo1</Option>
              <Option value="demo2">Demo2</Option>
            </Select>
          )}/>
      </form>
    </FormProvider>
  )
}