Responsive to read-only loading in formcontrol

Question

I use the bootstrap reaction, and this framework provides some good FormControls.

But I would like to create an input field that is created in FormControls in order to have the readonly = "readonly" option. Thus, this field looks the same as my other FormControls, but does not provide keyboard input in iOS.

In my case, the input will be provided by the calendar picker, which will be called by popover.

Does anyone know how to provide the FormControl parameter readonly = "readonly" so that the generated input field in the browser has prop readonly = "readonly"?

Lots of thnx for answers!

Answer 1

This doesn't seem like a bootstrap reaction problem, but rather a reaction. The reaction does not transfer the "readonly" prop to the generated (valid) DOM element:

React-bootstrap create the following dom virtual login response:

However, the reaction generated the following real DOM element, omitting the readonly attribute:

Perhaps using "disabled" might help in your case:

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

For the differences between readonly and disbabled, see here: https://stackoverflow.com/a/16837/16937/ ...

I created a problem in the React github repo: # 6783

---

UPDATE

Having received the answer in the above problem. You need to write it using camelcase: readOnly.

So this should be:

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