如何阻止Material UI日期输入框内容自动全选聚焦？

• 问题根源：原生<input type="date">组件的默认行为就是聚焦到年份、月份或日期段时自动全选该段内容，Material UI的TextField只是对原生组件的封装，会继承这个行为。你之前尝试的userSelect: none和tabIndex=-1无法干预原生日期输入框的内部选中逻辑。

• 解决方案：通过inputRef获取真实的input DOM元素，监听focus事件，手动将光标定位到选中内容的末尾，取消全选状态。

修改后的代码示例：

import { useRef, useEffect } from 'react';
import TextField from '@mui/material/TextField';

// 组件内部逻辑
const dateInputRef = useRef(null);

useEffect(() => {
  const inputElement = dateInputRef.current;
  if (!inputElement) return;

  const handleFocus = () => {
    // 延迟执行，确保原生全选行为已完成
    setTimeout(() => {
      const { selectionStart, selectionEnd } = inputElement;
      if (selectionStart !== selectionEnd) {
        // 将光标定位到选中区域末尾，取消全选
        inputElement.setSelectionRange(selectionEnd, selectionEnd);
      }
    }, 0);
  };

  inputElement.addEventListener('focus', handleFocus);
  return () => inputElement.removeEventListener('focus', handleFocus);
}, []);

// 渲染TextField组件
<TextField
  inputRef={dateInputRef}
  className={`${classes.formInput} ${classes.dateInput}`}
  classes={{ root: classes.dateInput}}
  value={date}
  name="date"
  onChange={e => setFormField(e.target.getAttribute('name'), e.target.value)}
  type="date"
  required
  label="Date"
  variant="standard" 
/>

• 代码说明：
  • 用useRef获取输入框的DOM引用，直接操作原生input元素
  • 通过setTimeout延迟调整光标位置，确保原生全选逻辑先执行
  • 调用setSelectionRange将光标移到选中内容末尾，此时退格键只会删除单个字符

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