react bootstrap readonly input within formcontrol

Question

I am using react bootstrap and this framework provides some nice FormControls.

But I would like to make the Input field that is generated within the FormControls to have a prop of readonly="readonly". This way, this field looks the same as my other FormControls, but does not give a keyboard input on IOS.

In my case, the input will be provided by a calendar picker which will be triggered by an popover.

Does anyone know how to give FormControl the parameter readonly="readonly", so that the generated Input field in the browser will have the prop readonly="readonly"?

Many thnx for the answers!

Cutis

What have you tried so far? Please edit your question to show a minimal reproducible example of the code that you are having problems with, then we can try to help with the specific problem. You should also read How to Ask. – Carmelo

Answer 1

It doesn't look like a problem with react-bootstrap, but rather with react itself. React is not transferring the 'readonly' prop to the generated (real) DOM element:

React-bootstrap create the following react virtual dom input:

Yet, react generated the following real DOM element, omitting the readonly attribute:

Maybe using 'disabled' could help in your case:

<FormControl
   disabled
   type="text"
   placeholder="Enter text"
   onChange={this.handleChange}
 />

For differences between readonly & disbabled see here: https://mcmap.net/q/55435/-what-39-s-the-difference-between-disabled-quot-disabled-quot-and-readonly-quot-readonly-quot-for-html-form-input-fields

I have created an issue in React's github repo: #6783

---

UPDATE

After getting an answer in the above issue. You need to write it with camelcase: readOnly.

So it should be:

<FormControl
   readOnly
   type="text"
   placeholder="Enter text"
   onChange={this.handleChange}
 />

Affricate

it can be readOnly only under certain circumstances, so for when it is not, you need to handle change – Affricate

@Affricate but the way you've answered it, it will be readOnly in all circumstances? – Capuchin

@Capuchin You can use it with: readOnly={false} || readOnly={true} – Affricate

@omerts. No. there is no such thing as readOnly= true/false; if it's present, it is assumed to be read only! you can have readOnly="whatevs", readonly="true", readOnly="false" all mean the same thing. – Capuchin

@Capuchin It works, please look at the way I wrote it precisely,I am using {false}, and not 'false'. See here: jsfiddle.net/omerts/b5q8axhn – Affricate

@Affricate yes you are 100% correct it works ! And now this will be something I and others will have to remember. that "false" and {false} behave differently - that is totally unexpected (and bad in my opinion that the library allows for that) – Capuchin

Answer 2

Old problem, new approach: Take advantage of onChange event to control if you'll call handleChange event or not. I defined editForm as a props value controlled by buttons, to see if i'm in view or edit mode.

Example:

<TextField
        name="id"
        label="ID
        value={entityState.entity.Id || ""}
        onChange={(a) => (props.formEdit ? handleChange(a) : "")}
/>

Courtier

Answer 3

On the basis of values this attribut will be readOnly={!!value} to make input field disable to edit

class Input extends React.Component {
  render () {
    const { defaultValue, value, onChange } = this.props
    const nothing = () => {}
    
    return (
      <input
        type='text'
        defaultValue={defaultValue}
        value={value ? value.toUpperCase() : undefined}
        readOnly={!!value}
        onChange={value ? nothing : onChange}
       />
    )
  }
}

class App extends React.Component {
  constructor () {
    super ()
    
    this.state = {
      value: 'arr'
    }
  }
  
  handleChange (e) {
    const { target: { value }} = event
    this.setState({ value })
  }
  
  render () {
    const { value } = this.state
 
    return (
      <div>
        <Input 
          onChange={this.handleChange.bind(this)}
          defaultValue={'patata'}
          />
        <Input 
          value={value}
          />
     </div>
    )
  }  
}

ReactDOM.render(<App />, document.getElementById('arr'))

Put