Material-ui: [TextField] autoFocus doesn't seem to be working

[kazazor]

Problem description

I tried making auto focus on my TextField with no success.

I also looked and saw that the autoFocus is being @ignore from the docs. Why is that?

Tried with autoFocus={true}

<TextField
        autoFocus={true}
        onChange={ (e) => debounceOnChange(e.target.value) }
        type="search"
      />

Tried with inputProps={true}

<TextField
        inputProps={autofocus: {true}}
        onChange={ (e) => debounceOnChange(e.target.value) }
        type="search"
      />

And even InputProps:

<TextField
        InputProps={autofocus: {true}}
        onChange={ (e) => debounceOnChange(e.target.value) }
        type="search"
      />

Versions

• Material-UI: 1.0.0-alpha-19
• React: 15.6.1
• Browser: Al of them

[oliviertassinari]

I have noticed that the autoFocus behaviour is unreliable, I believe it's an issue with React internally. I have noticed the same thing outside of Material-UI.

is being @ignore from the docs. Why is that?

We avoid documenting native React properties not to introduce noise in the docs.

[kazazor]

This is actually in the specs now that I look at it and it seems fine (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus).

I solved it using this method:

class Example extends Component {
  constructor() {
    super();

    this._focus = this._focus.bind(this);
  }

  _focus() {
    this.textInput.focus();
  }

  componentDidUpdate(){
    this._focus();
  }

  render() {

    return (
        <TextField 
            inputRef={(input) => { this.textInput = input; }} 
            disabled={this.props.disabled}
        />
    );
  }
}

WDYT about adding the autoFocus attribute in a way that if it's set to true it will perform the call the _focus like I did here?

That way the component will support auto focus that works :)

[oliviertassinari]

WDYT about adding the autoFocus attribute in a way that if it's set to true it will perform the call the _focus like I did here?

I was expecting React to do such thing internally :pensive:.

• test
• source

[stunaz]

Well it seems to work well with inputProps={{ autoFocus: true }} see https://codesandbox.io/s/ERxnnX9mm

[kazazor]

Thanks!

It seems that in my case since it was disabled on start the autoFocus only applied during that time. As far as I'm concern we can close this issue.

I still think that we should have the autoFocus be set on the TextField and inside of it make perform the inputProps stuff. That way it's easier to use :)

[oliviertassinari]

I still think that we should have the autoFocus be set on the TextField

Your first example should be working too:

<TextField
        autoFocus={true}
        onChange={ (e) => debounceOnChange(e.target.value) }
        type="search"
      />

[cyrfer]

In case someone is struggling with this.

I updated the implementation in the codesandbox link above to use the latest version, and it works in codesandbox.
https://codesandbox.io/s/recursing-framework-deoxv?fontsize=14&hidenavigation=1&theme=dark

However I'm struggling with this in my application. I verified onChange is not invoked immediately as well as onBlur so I don't think it is an event issue.

      <TextField
        {/* have also tried autoFocus={talent.autofocus} */}
        inputProps={{ autoFocus: talent.autofocus }}
        label="Talent"
        type="text"
        value={talent.name || ''}
        onChange={() => {console.log('onchange')}}
        onBlur={() => {console.log('onblur')}}
        margin="normal"
      />

However I was able to get it to work using a ref

const MyComponent = ({talent}) => {
  const inputRef = useRef()

  useEffect(() => {
    if (talent.autofocus) {
      inputRef.current.focus()
    }
  }, [talent.autofocus, inputRef])

  return (
      <TextField
        inputRef={inputRef}
        label="Talent"
        type="text"
        value={talent.name || ''}
        onChange={() => {console.log('onchange')}}
        margin="normal"
      />
  )
}