How to programmatically focus a TextField?

[mewben]

StackOverflow: https://stackoverflow.com/questions/37949394/how-to-set-focus-to-a-materialui-textfield/44587705#44587705

Expand

I have this textfield:

<TextField ref="item" />

I want to focus this textfield when I click a button. I have this

React.findDOMNode(this.refs.item).focus();

but it doesn't work.

I tried using a simple <input type="text" ref="item" /> and there's no problem with it.

Please help.

[ffxsam]

2 options

<TextField autoFocus />

2. If you have to put a slight time delay in to get the focus to happen.

function AutoFocusTextField(props) {
  const inputRef = React.useRef();

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      inputRef.current.focus();
    }, 100);

    return () => {
      clearTimeout(timeout);
    };
  }, []);

  return <TextField inputRef={inputRef} {...props} />;
}

[LuizLeite]

I finded this answer and i am very happy. Thanks.

[drecali]

If your TextField is in a Dialog, this solution should work for React 18+ MUI 15+ with Strict Mode enabled

1. The Dialog should have the disableRestoreFocus prop.
2. The text field in the Dialog should have the autoFocus prop.

<Dialog disableRestoreFocus {...otherProps}>
  ...
  <TextField autoFocus {...otherProps}/>
</Dialog>

[bjoernuhlig]

If your TextField is in a Dialog, this solution should work for React 18+ MUI 15+ with Strict Mode enabled

1. The Dialog should have the disableRestoreFocus prop.
2. The text field in the Dialog should have the autoFocus prop.

<Dialog disableRestoreFocus {...otherProps}>
  ...
  <TextField autoFocus {...otherProps}/>
</Dialog>

This breaks html dialogs default behaviour.

By disabling expected focus behaviour (restore previously focus object on dialog close) one interferes with default Html behaviour. This is not better than using useEffect + setTimeout hacks. They do not break default behaviour and an argument can be made for better focus management (set focus to important field on dialog open).

The same argument cannot be made for disabling the focus-restore (why is it there in the first place? What is the use case for disabling that behaviour?)

User clicks button --> context changed to dialog, focus is trapped inside dialog. Focus is set manually to important input field to smooth user experience
User closes dialog --> continues navigating where he/she set off ( the button. the previously focussed element.)

The useEffect + setTimeout example should be preferred as it replicates accessibility requirements for dialogs:

• https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/#accessibilityfeatures