dohomi/react-hook-form-mui

`disabled` property inside of a form does not return a value for disabled inputs

Closed this issue · 6 comments

chelssw commented

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

Version: 6.8.0 (upgraded 2 weeks ago)
Tried this with 7.0.0-beta.0 (ran into issues with more recent beta releases)

If there is a disabled property on a CheckboxSelect component or a TextFieldElement component, the expected behavior would be that this is still part of the form, but not a value that we want the end user to edit. This was working prior to the v 6.8.0 upgrade (we were previously on version 5.15.1)

Currently this value is not being read by the form

Workaround for this solution is to add a readOnly property and to style the form element to display as a disabled component. This isn't ideal.

Expected behavior 🤔

If there is a disabled property on a CheckboxSelect component or a TextFieldElement component, the expected behavior would be that this is still part of the form, but not a value that we want the end user to edit. This was working prior to the v 6.8.0 upgrade.

Steps to reproduce 🕹

Steps:

  1. Create a form component with two separate TextFieldElement components
  2. The first TextFieldElement component should be disabled, however the value provided in this disabled field is essential for the form to submit successfully
  3. Edit the second TextFieldElement
  4. Observe a failed response from the API
bestickley commented

@chelssw, I just ran into this. How did you resolve it?

dohomi commented

this is the expected behaviour please read #233 (comment)

bestickley commented

@dohomi, got it. Thank you!

  • 👍1
sadik-malik commented

@dohomi, can we add a new prop that would apply disabled styles to material components but not disable the component in React Hook Form?

dohomi commented

@dohomi, can we add a new prop that would apply disabled styles to material components but not disable the component in React Hook Form?

is that not what you can do with the sx prop?

sadik-malik commented

With the sx prop, I'm required to define my own styles rather than relying on the default styles provided by MUI when using the disabled prop. Additionally, to prevent users from altering the input value, I need to include InputProps={{readOnly: true}}

The above thing seems like a workaround, when the same behaviour can be acheived using the disabled prop.