[pickers] When embedded inside iframe focus shifts to top of iframe when clicked

[harshebuilds]

Duplicates

• I have searched the existing issues

Steps to reproduce 🕹

No response

Current behavior 😯

I using Date Picker from MUiX. And have embedded it in iframe on wordpress. When I click on the date picker icon to select date, the focus shifts to the top of the iframe.

Expected behavior 🤔

The focus should not shift from the date picker

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords:

[LukasTy]

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>
  );
}

[harshebuilds]

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

[LukasTy]

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.

[harshebuilds]

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)

[LukasTy]

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. 🙈

[harshebuilds]

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

[harshebuilds]

Is there any update?

[Baruch-G]

@prem-2301 , I have the exact same issue. have you found a solution by any chance ?