Input has become readonly when i give initial value to it

Question

When I have set the value of input field from reactstrap to some value it becomes readonly.

    <Col md="6">
      <FormGroup>
        <Label htmlFor="department">Department</Label>
        <Field
          id="department"
          name="department"
          type="text"
          component={InputAdapter}
          initvalue={type?kpi.department:''}
        />
        <FormFeedbackAdapter name="department" />
      </FormGroup>
    </Col>

I am using field from react-final-form as shown n above code. Then

    const InputAdapter = (
  {
    input,
    meta,
    initvalue,
    invalid = meta => meta.touched && meta.invalid,
    valid = () => false,
    ...rest
  }
) => <Input { ...input } { ...rest } invalid={ invalid(meta) } valid={ valid(meta) } value={initvalue}/>

InputAdapter.propTypes = {
  invalid: PropTypes.func,
  valid:   PropTypes.func,
}

This is the InputAdapter Component. Here I set the value to initial value. But after this the field has become readonly. Same issue is with select type inputs.

score 2 · Accepted Answer · answered May 04 '19 at 11:16

2

You want to set defaultValue= instead of value=. Inputs with a value set become controlled components, the behaviour you are observing.

answered May 04 '19 at 11:16

P Varga

19,174
12
70
108

please elaborate a little. i am not getting this – Adesh Kumar May 04 '19 at 11:35
when I a using defaultValue instead of value I am getting value=null – Adesh Kumar May 04 '19 at 11:39
also it's saying i have to use one but i didn't specified the value attribute anywhere – Adesh Kumar May 04 '19 at 11:44
perhaps it's getting it from copying input props i.e. ...input – Adesh Kumar May 04 '19 at 11:44

Input has become readonly when i give initial value to it

1 Answers1