[TextField/Menu] Menu auto focus causes TextField to lose focus

[liddellj]

Problem description

With a controlled TextField, the field loses focus when re-rendered in the precense of a Menu component elsewhere that does not have disableAutoFocus set to true. Even if the menu is not open, and has not been interacted with.

Steps to reproduce

• Add a controlled TextField to your app
• Add a Menu with no disableAutoFocus prop (this will default the prop to false)
• Click in the TextField such that it takes focus, note that the underline appears
• Enter a single character
• Observe that the TextField loses focus on re-render
• Change the Menu so that disableAutoFocus is set to true
• Enter a single character in the TextField
• Observe that the TextField no longer loses focus

Versions

• Material-UI: 0.15.0
• React: 15.0.2
• Browser: Chrome 51.0.2704.63 (64-bit)

[philcruz]

I'm hitting the same issue, TextField is losing focus. In my case, I have a SelectField with MenuItems. The SelectField doesn't have the disableAutoFocus property. Any other workarounds?

[philcruz]

On further investigation, it wasn't the SelectField. I had a Menu, that was part of a Drawer. Even though the Drawer was not open it was causing the issue. Setting disableAutoFocus as has been suggested resolved it. I should also note this was not an issue in Chrome desktop. It was only a problem on Cordova/Android (didn't check iOS). When touching the TextField the keyboard would come up then immediately go away (because the Menu was taking focus) and the TextField did not have focus so you effectively could not type in the TextField.

[torstenrudolf]

oooohhh, jsut ran into same issue. took me aeons to debug ;-(

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.

[raghavendracs]

Finally !!!! After spending hours on trying to debugging this and going all over the place in redux-forms this finally came to this which fixed the exact same issue for me too !

[sandbox4013]

For those, who has no luck with previous suggestions - try this one

<Menu
  disableEnforceFocus
  disableRestoreFocus
  {...otherProps}
/>

[justcode-hj]

Hey There !
Just needed to know, where to write disableAutoFocus ?

[mr-amarok]

@sandbox4013 thanks ! Your suggiestion was my last hope and it worked !