如何设置仅通过操作按钮关闭MUI X DesktopDatePicker？

• 问题：当前配置的DesktopDatePicker在点击取消/确认按钮时会关闭，但按下Esc键或点击选择器外部也会触发关闭，需要限制仅通过操作按钮关闭。
• 当前代码：

<DesktopDatePicker closeOnSelect={false} slotProps={{ actionBar: { actions: ['cancel', 'accept'] } }} />

实现方案 #

利用组件的onClose事件结合关闭原因（reason）来阻止非操作按钮触发的关闭行为：

1. 在onClose回调中，判断关闭原因是否为"escapeKeyDown"（按下Esc）或"backdropClick"（点击外部），若是则调用event.preventDefault()阻止默认关闭逻辑。
2. 保留closeOnSelect={false}确保选择日期时不会自动关闭。

修改后的代码示例：

<DesktopDatePicker
  closeOnSelect={false}
  slotProps={{ actionBar: { actions: ['cancel', 'accept'] } }}
  onClose={(event, reason) => {
    // 仅允许通过操作按钮关闭
    if (reason === 'escapeKeyDown' || reason === 'backdropClick') {
      event.preventDefault();
    }
  }}
/>

原理说明 #

• MUI的DatePicker组件在触发关闭时会传递reason参数，标识关闭的触发来源：
  • "actionClick"：点击操作按钮（取消/确认）
  • "escapeKeyDown"：按下Esc键
  • "backdropClick"：点击选择器外部区域
• 通过event.preventDefault()可以阻止组件执行默认的关闭流程，从而实现仅允许操作按钮触发关闭的需求。

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