[Select] Shows the first item to be selected when initial value is blank or null and the menu popover is not aligned properly with the Select

[anuraggo]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Trying to create a simple basic Select with no customization / or styling.
Two issues observerd --

• As shown in picture, the first item 'Ten' is shown kind of selected gray background. However, I didn't hover or clicked inside the menu.
• The menu popover has incorrectly aligned left positions w.r.t Select.

Please help.
Below is the code snipped used --

import * as React from 'react';
import MenuItem from '@mui/material/MenuItem';
import Select, { SelectChangeEvent } from '@mui/material/Select';

export default function SelectLabels() {
  const [age, setAge] = React.useState('');
  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value);
  };
  
  return (
    <div>
      <Select
        labelId="demo-simple-select-helper-label"
        id="demo-simple-select-helper"
        value={age}
        onChange={handleChange}
        sx={{ minWidth: 120 }}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </div>
  );
}

Expected behavior 🤔

No response

Steps to reproduce 🕹

Steps:

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

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

[michaldudak]

The darker background indicates a highlighted item - that is, the one that will get selected when you press Enter.
As for the misalignment - it does look like a bug. Would you be interested in investigating it and working on a fix?

[NicoSan20]

@michaldudak : Same issue here ! The first item is selected when initial value is blank or null. And this happen without pressing enter as you claim.

[michaldudak]

I didn't mean you need to press Enter. I'm saying that the first item is highlighted, which means it'll be selected after a user presses Enter. This is by design.

[immortalt]

Same issue here! This problem can be triggered when running https://mui.com/material-ui/react-app-bar/#app-bar-with-menu on iOS (16.3.1 latest) and Safari (latest). The first menu item would be gray after the menu appeared.

[NenadBecanovicPD]

I didn't mean you need to press Enter. I'm saying that the first item is highlighted, which means it'll be selected after a user presses Enter. This is by design.

@michaldudak You are right, but the highlighted first item is not clickable so it can't be chosen by click but only by Enter.

[LeeSolfmk]

@michaldudak I have same opinion as @NenadBecanovicPD. This issue is torturing my designer and me.. please let us know as least how to disable that option, either with api option or with css id.

[michaldudak]

the highlighted first item is not clickable so it can't be chosen by click but only by Enter.

@NenadBecanovicPD, what do you mean by not clickable?

@LeeSolfmk, how would you like to indicate the currently highlighted item, then?

You can target the highlighted item using the .Mui-focusVisible CSS class, but if you remove the highlight it will become inaccessible by the keyboard.

[michael-lynch]

You should be able to disable autoFocus on the <Menu>.

<Select
  MenuProps: {{
    autoFocus: false
  }}
/>

https://mui.com/material-ui/api/select/#Select-prop-MenuProps
https://mui.com/material-ui/api/menu/#Menu-prop-autoFocus

[fatemehqasemkhani]

Saved my day, Thanks.