如何修改Material UI v5.14.6 TextField组件的光标起始位置？

我们在使用Material UI v5.14.6的TextField组件时，遇到光标起始位置不符合预期的问题，尝试以下三种方法均未解决：

尝试过的无效方法 #

• 方法一：仅调整输入框内边距，与光标位置无关联

<TextField
  // ... other props
  sx={{
    "& input": {
      padding: "10px",
    },
  }}
/>

• 方法二：通过inputProps设置selectionStart，仅初始渲染生效，会被组件内部逻辑覆盖

<TextField
  label="Username"
  placeholder="Enter your username"
  inputProps={{ selectionStart: 5 }} // Set the starting cursor position
/>

• 方法三：使用useRef+useEffect异步设置，时机滞后于Material UI内部focus处理，导致设置被覆盖

import React, { useState, useEffect, useRef } from "react";
import TextField from "@mui/material/TextField";

export default function CustomizedTextField() {
  const [startCursorPosition, setStartCursorPosition] = useState(5);
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.setSelectionRange(startCursorPosition, startCursorPosition);
    }
  }, [startCursorPosition]);

  return (
    <TextField
      label="Username"
      placeholder="Enter your username"
      inputRef={inputRef}
      onFocus={() => setStartCursorPosition(5)} // Set the desired starting position
    />
  );
}

正确解决方法 #

核心问题是Material UI的TextField在focus时会执行内部逻辑（如标签浮动、样式更新），异步设置光标会被这些逻辑覆盖。我们可以通过同步延迟执行光标设置来规避：

import React, { useRef } from "react";
import TextField from "@mui/material/TextField";

export default function CustomizedTextField() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    const inputElement = inputRef.current;
    if (!inputElement) return;

    // 用requestAnimationFrame确保在Material UI内部处理完成后执行
    requestAnimationFrame(() => {
      // 避免设置的位置超过输入框内容长度
      const targetPosition = Math.min(5, inputElement.value.length);
      inputElement.setSelectionRange(targetPosition, targetPosition);
    });
  };

  return (
    <TextField
      label="Username"
      placeholder="Enter your username"
      inputRef={inputRef}
      onFocus={handleFocus}
    />
  );
}

原理说明 #

requestAnimationFrame会将光标设置操作推迟到下一次浏览器重绘前执行，确保Material UI完成所有focus相关的内部操作后，再覆盖光标位置，避免被组件自带的逻辑冲掉。同时增加了长度判断，防止当输入框内容为空时设置无效的光标位置。

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