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!

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://stackoverflow.com/a/7730719/1415921

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}
 />