[pickers] When embedded inside iframe focus shifts to top of iframe when clicked about mui-x HOT 7 OPEN

Hello @prem-2301. Thank you for opening this issue.
I tried replicating your case, but I wasn't able to experience the same problem.
Could you provide a minimal reproduction example so that we could investigate the problem? 🤔
A repository could work very well in this case.

I've tried with the following setup:

import * as React from "react";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { Router, Routes, Route, Link } from "react-router-dom";
import { createBrowserHistory } from "history";

function BasicPicker() {
  return (
    <>
      Some random text
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker label="Basic date picker" />
      </LocalizationProvider>
    </>
  );
}

export default function PickerInIframe() {
  const history = createBrowserHistory();
  return (
    <Router location={history.location} navigator={history}>
      <Routes>
        <Route
          key="home"
          path="/"
          element={'Home'}
        />
        <Route
          key="iframe"
          path="pickers-frame"
          element={<BasicPicker />}
        />
      </Routes>
      <Link to="/">Home</Link>
      <Link to="/pickers-frame" target="pickers_frame">
        Open iframe
      </Link>
      <iframe name="pickers_frame" title="iFrame" width={500} height={450} />
    </Router>
  );
}

from mui-x.

The date picker code:
https://github.com/prem-2301/datepickerissue
This is hosted here : https://aquamarine-heliotrope-d78393.netlify.app/embed

The iframe code (where the issue is occuring):
https://codesandbox.io/p/devbox/date-picker-7rgphf?file=%2Fapp%2Fembed%2Fpage.js%3A16%2C68

from mui-x.

Thank you for providing a reproduction example. 👍
I could reproduce it using a minimal example with two separate pages locally.
But what browser are you experiencing this issue on?
For me, it was only Firefox that was exhibiting this behavior... 🤷

I also found the same question on StackOverflow.

from mui-x.

Hi, I looked into the stack solution but there's no such prop for DesktopDatePicker. Also, this issue is replicating on all browsers for us (Edge, Chrome, Brave)

from mui-x.

Thank you for your confirmation regarding browsers. 👌

Hi, I looked into the stack solution but there's no such prop for DesktopDatePicker

Yes, such an exact prop does not exist and it's not that I would recommend the suggested solution, because it's just bad UX and a11y. 🙈

from mui-x.

The thing we identified was the focus is shifting to top because of some inset property to the class MuiPopper-root (I might be wrong)

PFA a screenshot for the same

from mui-x.

Is there any update?

from mui-x.