[TextField] proposal: read-only prop

[caub]

It would interesting to be able to switch easily between a "presentation"/review mode and an editable mode

Like disabled prop, but not with that opacity

Let me make a codesandox demonstrating it

[oliviertassinari]

How is it different from using the readOnly attribute of the native input?

[caub]

Good point, I didn't know about it, the only annoying part is that the field has still the focusable effect https://codesandbox.io/s/lp7z7zkp1z even in read-only

But that's native https://jsfiddle.net/crl/70jw3nah/ too so I can manage that myself

Thanks, I will close

I'd still want maybe a way to disable the Input's inkbar, when it's readOnly, will see what I can do

[oliviertassinari]

@caub Great. Here is the answer in case codesandbox lost this piece of code:

import React from 'react';
import { render } from 'react-dom';
import TextField from './TextField';
import Button from 'material-ui/Button';

class App extends React.Component {
  state = {readOnly: true}

  render() {
    const {readOnly} = this.state;
    return (
      <div>
        <TextField
          inputProps={{
            readOnly: Boolean(readOnly),
            disabled: Boolean(readOnly),
          }}
          required
          fullWidth={true}
          label="Name"
          name="name"
          margin="normal"
          defaultValue={"test"}
        />
        <Button raised
          onClick={e => {this.setState({readOnly: !readOnly})}}>
          {readOnly ? 'edit' : 'review'}
        </Button>
      </div>
    )
  }
}

render(<App />, document.getElementById('root'));

[sameer-kumar-jain]

I am having weird issue with this, if I have an empty readonly TextField and update its value on later state change, I can see overlapping label and value.

[sameer-kumar-jain]

Sorry false alarm, I missed setting initial state parameter