javascript - react-hook-form: using readyOnly in a select element - Stack Overflow

admin管理员组

文章数量:1356914

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?

• javascript
• html
• reactjs
• forms
• react-hook-form

Share Improve this question Follow edited Oct 13, 2021 at 13:43 NearHuscarl 82.1k2323 gold badges320320 silver badges282282 bronze badges asked Oct 13, 2021 at 10:38 ChrissisbeastChrissisbeast 5111 gold badge22 silver badges1212 bronze badges 3

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The 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 })}

本文标签： javascriptreacthookform using readyOnly in a select elementStack Overflow