如何阻止MUI X Date Picker关闭时屏幕跳转？

问题场景：打开MUI X Date Picker后，滚动页面让选择器完全移出屏幕视野，点击外部关闭选择器时，屏幕会自动滚动回输入框的初始位置，不符合“关闭时无滚动跳转”的需求。

问题根源 #

关闭选择器时，Popper组件默认会将焦点恢复到触发它的输入框，而浏览器会自动将聚焦元素滚动到视口中，这就是导致屏幕跳转的原因。

解决方案 #

通过配置DatePicker的Popper属性，禁用关闭时的焦点恢复行为即可解决。具体代码如下：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';

// 示例配置
<DatePicker
  label="Date desktop"
  slotProps={{
    popper: {
      shouldRestoreFocus: false
    }
  }}
  // 你的其他配置项（如value、onChange等）
/>

如果使用的是MUI X旧版本（v5.x早期），可能需要通过PopperProps直接传递：

<DatePicker
  label="Date desktop"
  PopperProps={{
    shouldRestoreFocus: false
  }}
  // 你的其他配置项
/>

原理说明 #

将shouldRestoreFocus设置为false后，Popper在关闭时不会再将焦点返还给输入框，浏览器也就不会触发自动滚动到输入框的行为，从而实现关闭选择器时屏幕无跳转的效果。

内容的提问来源于stack exchange，提问作者Jonathan Segal