[TextField] autoFocus doesn't seem to be working

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

Issue Analytics

State:
Created 6 years ago
Comments:9 (6 by maintainers)

Top GitHub Comments

23reactions

stunazcommented, Jun 25, 2017

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

13reactions

cyrfercommented, Jan 19, 2020

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