Material-ui: [TextField] proposal: read-only prop

Created on 8 Jan 2018 · 5Comments · Source: mui-org/material-ui

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

TextField question

Source

caub

Most helpful comment

@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'));

oliviertassinari on 9 Jan 2018

👍6 ❤2

All 5 comments

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

oliviertassinari on 8 Jan 2018

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

caub on 8 Jan 2018

@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'));

oliviertassinari on 9 Jan 2018

👍6 ❤2

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.