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

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)

Issue Analytics

State:
Created 7 years ago
Reactions:42
Comments:8 (1 by maintainers)

Top GitHub Comments

4reactions

sandbox4013commented, Mar 19, 2021

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

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

1reaction

raghavendracscommented, Oct 17, 2017

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 !

Top Results From Across the Web

In React ES6, why does the input field lose focus after typing a ...

This will cause the input to lose focus. If the elements are generated within a .map() function, use the index to be part...

React Text Input Losing Focus After Each Keypress

React Text Input Losing Focus After Each Keypress. This bug took me a while to figure out, so I thought I would share...

Focus and text fields - Flutter documentation

Focus a text field as soon as it's visible To give focus to a text field as soon as it's visible, use the...

focused(_:) | Apple Developer Documentation

The text field binds its focus state to the Boolean value usernameFieldIsFocused . A “Submit” button's action verifies whether the name is available....

focus - Cypress Documentation

Focus, type, and blur a textarea. // yields the <textarea> for further chaining cy. · Focus is not an action command . ·...