Material-ui: [TextField] strange autoFocus behaviour

[imanbee]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When I am setting autoFocus attribute on element, I expect it will be focused when mounted, and it will have MuiInput-focused-xxx CSS class on within the DOM tree.

Current Behavior

In my case, I have only label focused as MuiFormLabel-focused-xxx and MuiInput is not, which looks like

So it does not have even cursor on input.

Steps to Reproduce (for bugs)

1. Render

<form>
        <TextField
          id="name"
          label={'Name'}
          value={""}
          autoFocus
          margin="normal"
          fullWidth
        />
</form>

Context

Value for this TextInput is empty when just mounted

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.20 |
| React | 15.6.2 |
| browser | Google Chrome 62.0.3202.94 |

[oliviertassinari]

I fear it's not an issue I can reproduce :/ https://codesandbox.io/s/m41yp2oq9x.

[HexiDave]

I just ran into this with a Dialog that I pop open after using a Menu. The onBlur event of the TextField is complaining about the button used to open the menu taking focus. Not sure where the initial re-focus is coming from yet, but here's a sandbox based off of yours:

https://codesandbox.io/s/r5kkvz30yn

[HexiDave]

Alright, it's almost certainly caused by Modal's restoreLastFocus() function (https://github.com/callemall/material-ui/blob/v1-beta/src/Modal/Modal.js#L231). It holds a note of the last focused element, so when the Menu finishes its fade-out - which is after the new Dialog has gained focus - it re-focuses on the Button used to open the Menu.

I'm guessing if I use the Menu's onExited transition handler to open the new Dialog it will work fine. I'll be able to test that out in a bit.

I don't know if this is what's affecting @imanbee or not.

[HexiDave]

I had to abandon the search for what's causing the focus/blur chain - it might even be the browser doing it, but Modal does appear to be getting involved.

For now, I tried with opening the Dialog after the Menu onExited transition and it works:
https://codesandbox.io/s/7yrllx6q2j

[imanbee]

In my case form was rendered inside Drawer component, which was opened by clicking on MenuItem.

[aigoncharov]

@oliviertassinari I stumbled upon this issue when I go from one modal to another one. At certain point I have two modals in my DOM tree. As far as I can tell my new text input with autofocus in the new modal is being autofocued, handleFocusListener function of the old modal is being executed, inside of this listener 'mounted' is still true and modalManager.isTopModal returns true as well, therefore it passes the guarding if and gets to modalContent.focus(), which focuses the old modal.
I want to point out that I don't render dialogs conditionally, I just manipulate their open props. If I add conditional rendering, the issue goes away.

[retyui]

@oliviertassinari
this bug still actual for me , do you have any solution?

[stephenway]

@retyui Do you have repro steps on your issue? I'm curious how this is affecting your project. Thanks

[ythecombinator]

Any news on this? It's still a thing for me using @material-ui/core": "1.3.1.

[stephenway]

@ythecombinator Could you list steps to reproduce your issue?

[nxtman123]

I've found a good fix by applying the disableRestoreFocus prop to the intermediate modal (or derivative thereof). In my case this is a Popover, so the prop is passed through to the Modal inside.

In the example below demonstrates the use of disableRestoreFocus to allow autoFocus to work on the TextField:
https://codesandbox.io/s/l4vppp986m

[trevorblades]

@nxtman123 this solution worked for me! Thanks for the explanation and demo

[oliviertassinari]

I have taken the codesandbox provided by @HexiDave https://codesandbox.io/s/r5kkvz30yn and updated to the latest version of Material-UI: https://codesandbox.io/s/zxj8w7p9wl. The issue is gone 🎉 .

[bopfer]

I am having an issue that appears to be related to this one:

https://codesandbox.io/s/github/bopfer/mui-formik-input-focus

Just look at the "Plain Form" to see the issue I am having. When I click on that form from the home page, the first input is focused properly. But, if I go back to home, then open the drawer and click the "Plain Form", the first input is not focused. Instead the IconButton takes the focus. (It think the input is quickly focused, then it's blurred when the IconButton takes the focus).

Is there any way to get this working properly without an inputRef and imperatively setting the focus?

[oliviertassinari]

@bopfer The disableRestoreFocus prop could help.

[bopfer]

@oliviertassinari, I just added that to the Drawer's ModalProps in my condesandbox. It stopped the focus from going to the IconButton. But, it still does not go to the input field. Looks like it is staying in the Drawer somewhere.

[oliviertassinari]

Maybe you need to disable the focus trap too.

If you can find an elegant solution that doesn't require to disable any of the Modal accessibility features, let us know :)

[bopfer]

Adding disableEnforceFocus: true to the ModalProps works. But, that does seem bad for accessibility. I will let you know if I find anything more elegant.

[oliviertassinari]

I would look into a way to trigger the route transition a bit after the drawer closes.