[Select] Misaligned dropdown

[Alf-Melmac]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://mui.com/material-ui/react-select/#basic-select https://codesandbox.io/s/bug-missaligned-slect-dropdown-ubflw6?file=/demo.tsx (only changed minWidth to width)

Tested in Firefox and Edge (Chromium)

Current behavior 😯

The dropdown position doesn't align with the select.

Expected behavior 🤔

The dropdown should be aligned with the input. In the example it is a shift of 8px to the left

Context 🔦

No response

Your environment 🌎

No response

[oliviertassinari]

Maybe marginThreshold at 16px as a default is too much (from the Popover component).

---

Off topic, most of the bugs we have open for Popover are related to positioning: https://github.com/mui/material-ui/labels/component%3A%20Popover. Since Popper can solve this problem at a lower level, it could be great to rewrite Popover to use Popper internally. This wouldn't solve this problem though.

[michaldudak]

@Alf-Melmac, is this a real issue in your app, or are you just pointing out how our demos look? I'm asking because this misalignment is present only when a Select is very close to the viewport edge. The Popover moves the popup away from the edge to make some breathing room. I imagine it's not common for real-world apps to have the form controls placed so close to the edge, so the issue is mainly related to the demos.

Having said that, I think reducing the default marginThreshold could make sense anyway. Or perhaps setting it to 0 when a popover is used in a Select.

[Alf-Melmac]

@michaldudak Also in my app the dropdown is moved incorrectly. Here is an example from a modal dialog

[michaldudak]

That's interesting. It may be caused by something other than the issue in the codesandbox (the dropdown is shifted to the left, but Popover would usually want to increase the left margin by pushing it farther from the edges). Would you be able to isolate this exact issue on codesandbox?

[andrecrts]

hello, I found this issue yesterday. I thought what @michaldudak said but found that if you are using a custom html font-size in my case 62.5% it will move the popover a bit to the right but if I delete the custom font-size it will look good. I created this example to test my hypothesis.

[tarunsharma20]

I thought we could update it from modifiers, but it seems like modifiers are not getting applied; it's working as an HTML property instead.

<Select
  MenuProps={{
    modifiers: [
      {
        name: 'offset',
        enabled: true,
        options: {
          offset: [30, 50],
        },
      },
    ],
  }}
/>

I am getting the div below as output: <div role="presentation" id="menu-" modifiers="[object Object]" class="sc-jOhDuK euAeDJ MuiModal-root sc-iFwKgL MuiPopover-root sc-eVQfli MuiMenu-root">

[Grawl]

@tarunsharma20 it's because there is no Popper for Select, it uses Popover instead

[stelmakhivan]

@Alf-Melmac were you able to fix this behavior?

const MenuProps: SelectProps['MenuProps'] = {
  anchorOrigin: {
    vertical: 'bottom',
    horizontal: 'center',
  },
  transformOrigin: {
    vertical: 'top',
    horizontal: 'center',
  },
  marginThreshold: 0,
};

Works for me

[rj-wowza]

@stelmakhivan thank you marginThreshold was the missing prop i needed. this is not mentioned in the Menu api docs (though it can be found if you look hard enough in the popover docs) https://mui.com/material-ui/api/menu/ https://mui.com/material-ui/api/popover/#popover-prop-marginThreshold