Select menu width not taking border into account

[aldrichdev]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-4lhmay?file=Demo.tsx

Steps:

1. Observe the MuiFormControl-root width.
2. Open the dropdown. Observe that the menu item widths are 4px less.
3. The menu is not taking the 4px border (2px on left, 2px on right) of the select into account when calculating its width.

I am not sure why the menu appears slightly to the right under the dropdown, but I would ignore this, it is not happening in my project.

Current behavior

The width of the select menu is not calculated correctly because it does not include the select's borders in the calculation.

Expected behavior

The menu width should match the select width even if it has borders.

Context

I'm trying to get the dropdown menu to appear as the same width as the select without explicitly telling the menu to be 328px as well, and that solution isn't really viable for mobile since we want the select to be 100% of the width of the viewport.

Your environment

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (121.0.2277.112)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/core-downloads-tracker:  5.14.3
    @mui/icons-material: ^5.15.0 => 5.15.0
    @mui/material: ^5.14.3 => 5.14.3
    @mui/styled-engine:  5.13.2
    @mui/system: ^5.13.5 => 5.14.3
    @mui/types: ^7.2.4 => 7.2.4
    @mui/utils:  5.14.3
    @types/react: ^18.0.0 => 18.2.7
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^4.4.2 => 4.9.5

Search keywords: select menu width

[mj12albert]

@aldrichdev This doesn't seem to be an issue with Material UI – since you are customizing the theme, you could probably offset the extra 4px by adding it back to the select menu (maybe with calc()or place the border on the FormControl instead of the input

[github-actions]

👋 Thanks for using MUI Core!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://mui.com/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[aldrichdev]

@aldrichdev This doesn't seem to be an issue with Material UI – since you are customizing the theme, you could probably offset the extra 4px by adding it back to the select menu (maybe with calc()or place the border on the FormControl instead of the input

Hi @mj12albert, thank you for your response. I tried setting width: calc(100% + 4px) on .MuiPaper-root, and this makes it full width of its container, or ~1600px on my screen instead of the expected 328px. I also tried placing the border on the FormControl instead of the input, but the menu still incorrectly calculates its width to be 324px wide.

Edit: I re-read the bot's message, and I see I shouldn't be putting support requests here. I've moved this to StackOverflow: https://stackoverflow.com/questions/78030607/mui-select-menu-width-not-taking-border-into-account