MUI DesktopDatePicker 导致滚动到 iFrame 中的顶部

Question

我正在尝试在 iFrame 中使用 MUI 中的 DesktopDatePicker。 打开（单击按钮）时，页面父页面滚动到顶部。

  useEffect(() => {
    if (datePicker.current) {
      const blurPreventButton = datePicker.current.parentElement?.children[1].children[0];
      if (blurPreventButton) {
        blurPreventButton.id = 'openDatePickerButton';
        iframeBlurManipulation();
      }
    }
  }, []);


<DesktopDatePicker
  className="capitalize-text"
  value={selectedDate}
  autoFocus={false}
  slots={{
    day: ServerDay,
  }}
  inputRef={datePicker}
  onChange={handleDateChange}
  shouldDisableDate={shouldDisableDate}
  minDate={dayjs(firstValidDate)}
  slotProps={{
    popper: {
      disablePortal: true,
      autoFocus: false,
    },
  }}
  maxDate={dayjs(Object.values(departureDates).pop() || '')}
/>

我尝试过使用辅助函数来防止焦点集中在元素上，但这会导致另一个问题，即在其外部单击会滚动回焦点元素。

有人遇到过这样的问题并且可能想出了可行的解决方案吗？

添加 helper.js 函数，有助于不跳转，但随后会导致禁用焦点的问题。

export default function iframeBlurManipulation() {
  const button = document.querySelector('#openDatePickerButton');
  if (button) {
    button.addEventListener('blur', (event) => {
      event.target.focus();
    });
  }
}

Answer 1

我通过使用 StaticDatePicker MUI 而不是 DesktopDatePicker MUI 解决了该问题。并不是真正的修复，而是一种解决方法。