react-hook-form doesn't work when using material UI button

Question

This is my code without material UI button:

const {register, handleSubmit} = useForm();

const onSubmit = (data) => {
    console.log(data)
}
const handleChange = (e) => {
    console.log(e.target.files)
}

...

<form id="myFile" onSubmit={handleSubmit(onSubmit)}>
    <input id="file1" type="file" {...register("file1")} onChange={handleChange}/>
    <input type="submit"/>
</form>

This works for me, but when I try to add material UI button instead of input, I get onChange value but when I click submit. I don't get any form data.

const {register, handleSubmit} = useForm();

const onSubmit = (data) => {
    console.log(data)
}
const handleChange = (e) => {
    console.log(e.target.files)
}

...

<form id="myFile" onSubmit={handleSubmit(onSubmit)}>
    <input id="file1" type="file" {...register("file1")} onChange={handleChange} 
    style={{display:"none"}}/>
    <label htmlFor="file1">
        <Button variant="contained" component="span">
             Choose file
        </Button>
    </label>
    <input type="submit"/>
</form>

Is there any solution here?

Answer 1

You are forget to mention the type of the button

for Default material ui button type is

type="button"

Check this git Document

you should mention

type="submit"

So do like this

<Button type="submit" variant="contained" component="span">
             Choose file
</Button>

Answer 2

You can try something like this:

import React, { useState } from 'react';
import { Button, TextField } from '@material-ui/core';
import useForm from 'react-hook-form';
import { object, string } from 'yup';

const Form: React.FC = () => {
  const schema = object().shape({
    username: string().required('username required'),
    password: string().required('password required'),
  });
  const { register, handleSubmit, errors } = useForm({ validationSchema: schema });

  const onSubmit = (data: any) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextField
        name="username"
        error={!!errors.username}
        label="Username"
        helperText={errors.username ? errors.username.message : ''}
        type="email"
        inputRef={register}
        fullWidth
      />
      <TextField
        name="password"
        error={!!errors.password}
        label="Password"
        inputRef={register}
        helperText={errors.password ? errors.password.message : ''}
        type="password"
        fullWidth
      />

      <Button
        color="secondary"
        type="submit"
        variant="contained"
        fullWidth
      >
        Submit
      </Button>
    </form>
  );
};

ref: How to use react-hook-form with ant design or material UI

Answer 3

Currently your submit event is controlled by the whole form element <form onSubmit={handleSubmit(onSubmit)}> but this is possible only when the form has a relevant submit button like <input type="submit"/> but when you use materail ui, MUI button doesnt distincts submit type even if mentioned. So the solution is to move your onSubmit function at form to down the onClick event of your new MUI button. The code that works is:

<Button onClick={handleSubmit(onSubmit)} type="submit" variant="contained" component="span"> Submit </Button>