Select component is scrolling to top of page after selecting item

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Since I have a component select, after I select an option the component kind of loses the reference and scrolls to the top of the page even applying the MenuProps

<Select onChange={( e: ChangeEvent<{ name?: string | undefined; value: unknown }> ) => onChange(e.target.value, e.target.name, index)} value={item.selected} MenuProps={{ anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, getContentAnchorEl: null }} > {item?.materials?.map((c) => ( <MenuItem key={c?.name} value={c?.name}> {c?.name} </MenuItem> ))} </Select>

Expected behavior 🤔

The ideal scenario would be after selecting the option to keep the reference in the same place on the page and not scroll

Steps to reproduce 🕹

Steps:

1. Open the options that make up the select
2. Select an option
3. It will end up scrolling to the top of the page after that.

Context 🔦

I have a multiple component scenario on the screen where some of them are selectable, and when the user selects an option there is a scroll to the top of the page. And that’s a bad experience for the user.

Your environment 🌎

`npx @mui/envinfo`

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

[marr]

@caioorg What was the outcome here? I see you closed the issue with no explanation.

Thanks

[brichison]

This issue still exists.