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.

Answer 1

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