如何在React MUI Dialog打开时自动聚焦TextField组件

问题原因 #

Dialog打开属于异步渲染过程，直接使用inputRef回调或autoFocus属性时，TextField的DOM元素可能还未完成渲染，或者Dialog默认的自动聚焦行为会覆盖TextField的聚焦请求，导致聚焦失效。

解决方案 #

方案1：利用Dialog的onOpen事件+useRef #

通过useRef获取TextField的DOM引用，在Dialog的onOpen回调中，确保DOM渲染完成后执行聚焦操作：

import { Button, Dialog, DialogContent, TextField } from "@mui/material";
import { useState, useRef } from "react";

function ExampleDialog(props: { isOpen: boolean; onClose: () => void }) {
  const textFieldRef = useRef<HTMLInputElement>(null);

  const handleDialogOpen = () => {
    // 使用requestAnimationFrame确保Dialog及TextField渲染完成
    requestAnimationFrame(() => {
      textFieldRef.current?.focus();
    });
  };

  return (
    <Dialog 
      open={props.isOpen} 
      onClose={props.onClose} 
      onOpen={handleDialogOpen}
    >
      <DialogContent>
        <TextField inputRef={textFieldRef} fullWidth />
      </DialogContent>
    </Dialog>
  );
}

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Button
        variant="contained"
        color="success"
        onClick={() => setIsOpen(true)}
      >
        Open dialog
      </Button>

      <ExampleDialog isOpen={isOpen} onClose={() => setIsOpen(false)} />
    </div>
  );
}

方案2：禁用Dialog自动聚焦+TextFieldautoFocus #

MUI Dialog默认会自动聚焦到内部第一个可交互元素（如关闭按钮），通过添加disableAutoFocus属性禁用该行为，再给TextField设置autoFocus即可生效：

function ExampleDialog(props: { isOpen: boolean; onClose: () => void }) {
  return (
    <Dialog 
      open={props.isOpen} 
      onClose={props.onClose}
      disableAutoFocus // 禁用Dialog默认的自动聚焦
    >
      <DialogContent>
        <TextField autoFocus fullWidth />
      </DialogContent>
    </Dialog>
  );
}

说明 #

• 方案1适合需要手动控制聚焦时机的场景，比如Dialog打开后需要执行其他逻辑再聚焦；
• 方案2更简洁，适合只需Dialog打开即聚焦TextField的场景。

内容的提问来源于stack exchange，提问作者Matija Sirk