Unable to setValue on hidden type inputs
See original GitHub issueHi,
Describe the bug I use react-hook-form 3.23.0. I am not to be able to use setValue on type=“hidden” input fields, while setValue works OK on default input fields.
To Reproduce I have this simple component using semantic-ui-react.
import React from "react";
import useForm from "react-hook-form";
import {Form,Button,Radio} from "semantic-ui-react";
const MyForm: React.FC = props => {
const { register, handleSubmit, setValue } = useForm();
const onSubmit = (formData) => console.log(formData);
let data = {
start: true
};
return (
<>
<Form onSubmit={handleSubmit(onSubmit)}>
<Form.Field>
<label>Start?</label>
<input
type="hidden"
name="start"
defaultValue={data.start.toString()}
ref={register({required: true})}
/>
<Radio toggle name="start_toggle" defaultChecked={data.start}
onChange={(e, radio) => {
setValue("start", radio.checked)
}
} />
</Form.Field>
<Button primary type="submit">
Submit
</Button>
</Form>
</>
);
};
export default MyForm;
Expected behavior I want to use Semantic UI’s Radio component visualized as a toggle. I would like to store the value of the toggle in a backing field (name=“start”). When I have a type=“hidden” as the backing field the value always remains “true” (clicking submit logs the form value and start is always “true” there). However if I remove type=“hidden” and have a default text field then everything works fine and the value of “start” matches the state of the toggle.
Is there anything special in the handling of hidden inputs? Or what am I doing wrong?
Thanks!
Issue Analytics
- State:
- Created 4 years ago
- Comments:19 (11 by maintainers)
I am facing the same issue. Hidden fields don’t seem to work correctly… I did manage to get it working by setting CSS
display: none
instead of usingtype="hidden"
@bluebill1049 Sure thing! Thanks for the quick responses https://github.com/react-hook-form/react-hook-form/issues/2917