移动端Safari中Material UI TextField无法输入问题及解决方法

使用Material UI的Box组件嵌套带有onChange处理函数的TextField时，该组件在多数浏览器中正常工作，但移动端Safari存在异常：用户点击输入框输入内容后，输入框始终为空，输入的内容无法显示。

问题代码示例 #

const [personalDetails, setPersonalDetails] = useState({
  fullName: "",
  email: "",
  phoneNumber: "",
});

const handlePersonalDetailsChange = (event) => {
  const { name, value } = event.target;
  setPersonalDetails({ ...personalDetails, [name]: value });
};

<Box
  component="form"
  sx={{
    "& .MuiTextField-root": { m: 1, width: "100%" },
  }}
  noValidate
  autoComplete="off"
>
  <div>
    <TextField
      required
      id="outlined-required"
      label="Full Name"
      name="fullName"
      value={personalDetails.fullName}
      onChange={handlePersonalDetailsChange}
      type="text"
    />
  </div>
  <div>
    <TextField
      required
      id="outlined-required"
      label="Email"
      name="email"
      type="email"
      value={personalDetails.email}
      onChange={handlePersonalDetailsChange}
    />
  </div>
  <div>
    <TextField
      required
      id="outlined-required"
      label="Phone Number"
      name="phoneNumber"
      type="number"
      value={personalDetails.phoneNumber}
      onChange={handlePersonalDetailsChange}
    />
  </div>
</Box>

解决方法 #

在项目的index.css文件中添加以下CSS规则：

input { -webkit-user-select:text;}

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