I am trying to use readOnly in a select element so the user is unable to change the value of the input field but when submiting the form I still need that value for the Api and I heard that the only way to do that in react-hook-form is to use readOnly instead of disabled, it worked in a normal input field but typescript gives an error in select element. This is the code:
interface dataProps {
field_id: any;
disabled: boolean;
}
<select
readOnly={props.disabled}
id={props.field_id}
{...register(...)}
defaultValue={...}
onChange={...}
>
<option>
{...}
</option>
renderList(...)
</select>
I tried to shorten the code as much as possible, this is the whole error I get:
Type '{ children: any[]; defaultValue: any; onChange: (e: ChangeEvent<HTMLSelectElement>) => void; onBlur: ChangeHandler; ref: RefCallBack; name: string; readOnly: true; id: any; }' is not assignable to type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>'.
Property 'readOnly' does not exist on type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>'.
I read documentation of react-hook-form but I didn't see anything there about using readOnly, I landed on this link and when I tried to change the input there that has readOnly to select it gives the same error, is there a way to make that readOnly work or there is a workaround to make disabled save the data inside the handleSubmit?
I am trying to use readOnly in a select element so the user is unable to change the value of the input field but when submiting the form I still need that value for the Api and I heard that the only way to do that in react-hook-form is to use readOnly instead of disabled, it worked in a normal input field but typescript gives an error in select element. This is the code:
interface dataProps {
field_id: any;
disabled: boolean;
}
<select
readOnly={props.disabled}
id={props.field_id}
{...register(...)}
defaultValue={...}
onChange={...}
>
<option>
{...}
</option>
renderList(...)
</select>
I tried to shorten the code as much as possible, this is the whole error I get:
Type '{ children: any[]; defaultValue: any; onChange: (e: ChangeEvent<HTMLSelectElement>) => void; onBlur: ChangeHandler; ref: RefCallBack; name: string; readOnly: true; id: any; }' is not assignable to type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>'.
Property 'readOnly' does not exist on type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>'.
I read documentation of react-hook-form but I didn't see anything there about using readOnly, I landed on this link and when I tried to change the input there that has readOnly to select it gives the same error, is there a way to make that readOnly work or there is a workaround to make disabled save the data inside the handleSubmit?
- 1 Read only isn't supported in select see here: developer.mozilla/en-US/docs/Web/HTML/Attributes/readonly. This isn't a react hook form issue it's typescript enforcing HTML spec – zecuria Commented Oct 13, 2021 at 10:43
- So can you suggest how I can deal with the problem, is there a way to use disabled and still save the values in react hook form – Chrissisbeast Commented Oct 13, 2021 at 10:52
-
1
How about, in case of
props.disabled===true, displaying the data just as a simple text node (or disabled text input) instead of the select element? And for the purpose of passing the value to the API, using<input type="hidden" id="{props.field_id}" value={value}>? – 2DH Commented Oct 13, 2021 at 11:48
1 Answer
Reset to default 6The disabled attribute doesn't remove the field in react-hook-form when submitting. If you don't allow the user to edit the value, you can use it:
// category field is still registered even when set disabled.
<select {...register("category")} disabled>
In case you want to really remove the field from the submitted value, set disabled when calling register using RHF own API:
<input {...register("firstName", { disabled: true })}