material-ui: [Select] Clicking a Select component when embedded within an iFrame causes the page to jump [Firefox]

The issue is present in the latest release (and the v5 beta).
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When an app using Material-UI’s Select component is embedded within an IFrame, you get behaviour like this: alt text

As you can see when you click the Select input, the page jumps to the top of the IFrame

Expected Behavior 🤔

The options menu should open without causing the page to jump as it does.

Steps to Reproduce 🕹

App.js:

import * as React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

function App() {
  return (
      <div>
        <div style={{ height: '250px', backgroundColor: '#aaa'}}>{ /* empty space */ }</div>
        <div style={{ height: '250px', backgroundColor: '#bbb'}}>{ /* empty space */ }</div>
        <div style={{ height: '250px', backgroundColor: '#ccc'}}>{ /* empty space */ }</div>
        <FormControl sx={{ m: 1, minWidth: 120 }}>
          <Select>
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
          <FormHelperText>Without label</FormHelperText>
        </FormControl>
      </div>
  );
}

test.html:

<!doctype html>
<html lang="en">
    <body style="margin: 0;">
        <div style="height: 1000px;"></div>
        <iframe src="http://localhost:3000" style="border: 0; width: 100vw; height: 100vh;"></iframe>
        <div style="height: 1000px;"></div>
    </body>
</html>

Steps:

Create an empty React project and use the above App.js
Create the test.html using the provided code
Start the server and open test.html in Firefox, at which point follow along with the above gif to see the page jumping.

Context 🔦

We have our app embedded in an IFrame as part of a wider application and came across this page jumping issue.

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: Windows 10 10.0.18363
  Binaries:
    Node: 14.17.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Firefox: 90.0.2
  npmPackages:
    @emotion/react: ^11.4.0 => 11.4.0
    @emotion/styled: ^11.3.0 => 11.3.0
    @material-ui/core: ^5.0.0-beta.2 => 5.0.0-beta.2
    @material-ui/private-theming:  5.0.0-beta.2
    @material-ui/styled-engine:  5.0.0-beta.1
    @material-ui/system:  5.0.0-beta.2
    @material-ui/types:  6.0.1
    @material-ui/unstyled:  5.0.0-alpha.41
    @material-ui/utils:  5.0.0-beta.1
    @types/react:  17.0.15
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2

About this issue

Original URL
State: open
Created 3 years ago
Comments: 28 (9 by maintainers)

Most upvoted comments

I Managed to solve it as follows:

SelectProps={{ MenuProps:{ autoFocus: false, disableAutoFocusItem: true, disableEnforceFocus: true, disableAutoFocus: true, } }}

guilhermeabell on Jul 26, 2022

I managed to improve things a little. Changes in #33437 (available to try using under https://pkg.csb.dev/mui/material-ui/commit/011091b0/@mui/material) seem to make the Popover work better, but the issue with Select still exists. It doesn’t happen 100% of the time, though - it looks like a race condition somewhere. Still, with the fix I mentioned, the page doesn’t scroll to the top of the iframe but it centers the Select in the viewport. I’ll keep investigating it for some more time.

michaldudak on Jul 8, 2022

Hi folks! I’m trying to find the root cause of the issue right now. I’ve noticed that the new implementation of Select - SelectUnstyled from the @mui/base package does not suffer from this issue (it also fixes a couple of other problems the Material UI version has). If you’re willing to style it yourselves, it may be a viable option. Of course, I’ll try to fix the Material UI Select as well.

michaldudak on Jul 8, 2022

I Managed to solve it as follows:

SelectProps={{ MenuProps:{ autoFocus: false, disableAutoFocusItem: true, disableEnforceFocus: true, disableAutoFocus: true, } }}

While it successfully resolved the scrolling issue, it inadvertently introduced a new problem. Specifically, after implementing the suggested fix, the Select component does not lose focus when clicking outside of it; instead, it remains in focus. This behavior is not expected and needs to be addressed.

arfa123 on Jan 29, 2024

Solved this issue by disabling auto-focus for all problematic view types: Select, DatePicker, etc.

<DatePicker
   {...{autoFocus: false}}
   minDate={minDate} 
   ...
</DatePicker>

ValeryP on Jul 6, 2022

Hi @eps1lon, I can still reproduce the problem. Here is a link to a screen recording: https://streamable.com/10ohzw

I’m on Firefox 91 now.

stevegreenn on Aug 18, 2021

Here is a CodeSandbox: https://codesandbox.io/s/429zg Here is a direct link to the page containing an IFrame: https://429zg.csb.app/iframe.html

stevegreenn on Jul 6, 2022