MUI DesktopTimePicker选完小时即关闭，无法选择分钟如何解决？

核心原因及解决方案 #

1. 自定义onBlur事件干扰组件焦点管理

你在TextField上添加的自定义onBlur事件是主要诱因：点击小时选择器时，输入框失去焦点触发该事件，导致时间选择器弹窗被意外关闭。

解决方法：

• 若无需该onBlur逻辑，直接移除：

<DesktopTimePicker
  orientation="portrait"
  value={value ?? null}
  onChange={handleDateChange}
  renderInput={(params) => (
    <TextField
      {...params}
      variant="standard"
      fullWidth
      sx={{ m: 1.5 }}
    />
  )}
/>

• 若必须保留onBlur的业务逻辑，改用时间选择器的onClose事件替代（onClose会在用户确认选择或主动关闭弹窗时触发）：

<DesktopTimePicker
  orientation="portrait"
  value={value ?? null}
  onChange={handleDateChange}
  onClose={() => {
    // 原onBlur逻辑移至此处
    onBlur();
  }}
  renderInput={(params) => (
    <TextField
      {...params}
      variant="standard"
      fullWidth
      sx={{ m: 1.5 }}
    />
  )}
/>

2. 即时更新value导致组件意外重渲染

onChange会在每一步选择（如选完小时）时触发，若此时直接通过onValueChange更新父组件的value，可能导致DesktopTimePicker因状态变化重渲染，进而关闭弹窗。

解决方法：
使用onAccept事件替代onChange更新最终值，onAccept仅在用户确认选择（如点击确定按钮、点击弹窗外部）时触发：

// 组件内部新增临时状态存储中间选择值
const [tempValue, setTempValue] = useState(value ?? null);

<DesktopTimePicker
  orientation="portrait"
  value={tempValue}
  onChange={(date) => setTempValue(date)}
  onAccept={(finalDate) => {
    onValueChange(finalDate);
  }}
  renderInput={(params) => (
    <TextField
      {...params}
      variant="standard"
      fullWidth
      sx={{ m: 1.5 }}
    />
  )}
/>

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