I have a form build with react-hook-form v7 and there is one thing that I can not make it work. The submit button is disabled until some field in the form gets a value, then when I click on the submit button it gets disabled to avoid submitting the form twice by mistake. With the form submitted and the button disabled if I make a change in some field the submit button remains disabled and that is what I can't make it work, I want the button gets enabled if I make changes in the form.
This is the code for the form:
const {
control,
handleSubmit, reset,
formState: { errors, isDirty, isSubmitted, },
} = useForm<ISearchListFormFields>({
defaultValues: {
chiefCategory: null,
},
mode: 'onChange'
});
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<Label className='select-label'>Chefskategori</Label>
<Controller
control={control}
name='chiefCategory'
render={({ field: { onChange, value, ref } }) => (
<Select
inputRef={ref}
className='react-select-container authoritySelect'
classNamePrefix='react-select'
placeholder='Välj'
options={categoryList}
value={
categoryList.find((c) => c.value === value)
? categoryList.find((c) => c.value === value)
: null
}
onChange={(val) => {onChange(val.value);}}
/>
)}
/>
</div>
<div>
<RKPrimaryButton
text='Search'
type='submit'
disabled={!isDirty || isSubmitted}
/>
</div>
</form>Thanks for any help!