[material-ui] 不受控制的TextField组件在带有重置按钮的< form>中无法重置,且它们的浮动标签不会返回到默认状态

kxeu7u2r  于 5个月前  发布在  其他
关注(0)|答案(1)|浏览(54)

重复问题

  • 我已搜索现有的问题

最新版本

  • 我已经测试了最新版本

重现步骤 🕹

不使用状态的实时示例链接:https://codesandbox.io/p/sandbox/cranky-chihiro-vc6pq4
使用状态的实时示例链接:https://codesandbox.io/p/sandbox/upbeat-joana-2n4dz9

当前行为 😯

  1. 在清除第一个文本框(名字)后,使用TextField组件,点击表单中的重置按钮会将TextField的默认值与占位符(名字)重叠。
  2. 在第二个文本框(姓氏)中输入一些值后,使用TextField组件,点击表单中的重置按钮只会还原TextField的值,但TextField的浮动标签(姓氏)不会设置回其默认位置。
  3. 在第二个文本框(姓氏)中从建议值(之前输入的值)中选择值后,使用TextField组件,点击表单中的重置按钮会还原TextField的值,而浮动标签会返回到其默认位置,而在上述情况下则不会。
    如果我使用带状态的TextField,那么它将适用于上述所有情况。

预期行为 🤔

当我们不使用状态(对于第一个代码sandbox)时,点击重置按钮将使TextField的值重置为其默认值,同时浮动标签(占位符)也会返回到其默认位置。

上下文 🔦

  • 无响应*

你的环境 🌎

npx @mui/envinfo

System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (120.0.2210.77)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.28
    @mui/core-downloads-tracker:  5.15.1
    @mui/material: ^5.15.1 => 5.15.1
    @mui/private-theming:  5.15.1
    @mui/styled-engine:  5.15.1
    @mui/system:  5.15.1
    @mui/types:  7.2.11
    @mui/utils:  5.15.1
    @types/react: ^18.2.45 => 18.2.45
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^4.9.5 => 4.9.5
hivapdat

hivapdat1#

这已经在Base UI中得到了支持。在Material UI重构为使用Base UI之后,唯一需要修复的问题就是浮动标签的位置。

相关问题