CODEWITHSUNDEEP
javascriptreactjsreact-hook-form
copenndthagen
copenndthagen

Reputation: 50770

"react-hook-form" with disabled input returns undefined

In my React app, I have a form with a couple of input fields. I wrap the fields with FormProvider imported from react-hook-form and use register in the fields

import { useForm, FormProvider, useFormContext } from "react-hook-form";

Now one of the input field is disabled and on Submit, I do not see the input value for this disabled input box. How can I fix this and get the disabled form input ?

Upvotes: 2

Views: 7687

Answers (4)

Jason O
Jason O

Reputation: 11

I know readOnly doesn't give the same visual experience you are looking for compared to what disabled provides. I can see use cases for both where sometimes you want disabled data to still be in the form and other times to exclude the contents of the disabled input. I ran into the scenario where I wanted to show the user what will be submitted but not allow them to modify it. I used the suggested readOnly property but also with a little CSS set cursor: not-allowed and to set the text to be grayed out opacity: 0.5 for my scenario or you could also gray the text by doing color: #6b7280

You make some good points, and I can see both sides. I'm not sure if I have an opinion yet but for what I needed to accomplish the simple CSS worked for me.

Upvotes: 0

Bob
Bob

Reputation: 321

Just because the input is disabled, doesn't mean it doesn't have a value (undefined). Those are two completely separate conditions/situations. They are conflating UI issues with data issues and trying to solve it by creating one problem after another that they've forced onto us.

My use-case I have to display fields from a database (SFDC SObject) as checkboxes so the administrator can select which fields are going sync down to our mobile app. We're dealing with Salesforce as the backend. We have certain fields that are required; if they're required you can't uncheck them so we want them disabled, so not only can you not uncheck them but from a visual perspective as well to know that they can't be modified. Every user understands what a disabled field means no matter whether they're technical or not. In salesforce, you can have "formulas" which are comprised of other fields on the object you're looking at. If you select a formula field, you have to make all the fields in that formula also required (selected/checked but disabled).

So the notion that a disabled inputs have no value (undefined) is ridiculous. Again, they are conflating data issues and UI issues and have made a mess for their users.

And their example of using a <fieldset /> and making that disabled makes things even worse, because the <fieldset /> tag adds a box around the input control, changing the layout and the styling of the entire form, and the input itself is not disabled from a UI perspective. So the only alternative is to write extra CSS and branching logic in the code to correct the mess that they've given us with this problem.

As per Hiren's question(s) about clarification; yes to both: I need to visually display the field (as disabled) as well as save it to the database (or config file [SFDC Static Resource] in my case). The list of disabled fields is dynamic depending on how the SFDC object was configured and if it has any formula fields, and if you select any of those formula fields.

Upvotes: 0

Elvin Shahsuvarli
Elvin Shahsuvarli

Reputation: 636

You need to assign the value to the relevant field in useForm()

const {
    register,
    handleSubmit,
  } = useForm({
    values: {
      name: "Elvin",
      age: 29,
    },
  });

then, you can use disabled attribute and get the field value

    <input
      type="text"
      placeholder="Name"
      {...register("name")}
      disabled
     />

Upvotes: -1

Hiren Sanja
Hiren Sanja

Reputation: 101

Please use readonly because disable input will not return value after form submit.

Upvotes: 6

Related Questions