reactjsreact-bootstrapform-controlreadonly-attribute

react bootstrap readonly input within formcontrol

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!

Solution

  • 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: enter image description here

    Yet, react generated the following real DOM element, omitting the readonly attribute: enter image description here

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