Material UI v5中带按钮组件的表单Dialog打开时autofocus失效问题

原因分析 #

Material UI的Dialog组件默认会自动聚焦到内部第一个可聚焦元素（比如按钮、输入框）。如果你的Dialog中按钮（如确认/取消按钮）在TextField之前渲染，或者Dialog的自动聚焦逻辑先于TextField的autoFocus触发，就会导致TextField的焦点被覆盖，看起来autoFocus失效。

解决方法 #

方法1：禁用Dialog的自动聚焦 #

给Dialog组件添加disableAutoFocus属性，阻止Dialog自动抢占焦点，让TextField的autoFocus正常生效：

<Dialog
  open={open}
  onClose={handleClose}
  disableAutoFocus  // 添加该属性
>
  <DialogContent>
    <TextField
      autoFocus
      margin="dense"
      id="name"
      label="Email Address"
      type="email"
      fullWidth
      variant="standard"
    />
  </DialogContent>
  <DialogActions>
    <Button onClick={handleClose}>Cancel</Button>
    <Button onClick={handleClose}>Subscribe</Button>
  </DialogActions>
</Dialog>

方法2：确保TextField是第一个可聚焦元素 #

调整Dialog内元素的渲染顺序，让包含TextField的DialogContent在DialogActions之前渲染（官方示例采用的就是这个结构），这样Dialog的默认自动聚焦会优先选中TextField，和autoFocus的效果一致：

<Dialog open={open} onClose={handleClose}>
  {/* 先渲染包含TextField的内容区域 */}
  <DialogContent>
    <TextField
      autoFocus
      margin="dense"
      id="name"
      label="Email Address"
      type="email"
      fullWidth
      variant="standard"
    />
  </DialogContent>
  {/* 再渲染按钮区域 */}
  <DialogActions>
    <Button onClick={handleClose}>Cancel</Button>
    <Button onClick={handleClose}>Subscribe</Button>
  </DialogActions>
</Dialog>

方法3：手动通过Ref设置焦点 #

如果上述方法不适用，可以通过React Ref手动在Dialog打开时触发TextField的焦点：

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

function MyDialog() {
  const [open, setOpen] = useState(false);
  const emailInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (open && emailInputRef.current) {
      emailInputRef.current.focus();
    }
  }, [open]);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogContent>
          <TextField
            ref={emailInputRef}
            margin="dense"
            id="name"
            label="Email Address"
            type="email"
            fullWidth
            variant="standard"
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOpen(false)}>Cancel</Button>
          <Button onClick={() => setOpen(false)}>Subscribe</Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

内容的提问来源于stack exchange，提问作者Cleiton Freitas