MUI v5 select menu items merged horizontally

[jamintz]

Going through the v4 -> v5 upgrade guide, and my dropdown menus all now look like:

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

Current Behavior 😯

Menu items are all horizontally merged together

Expected Behavior 🤔

List should be vertical list where each item is a clickable item

Steps to Reproduce 🕹

Code sample:

<Select
displayEmpty
value={value || ''}
onChange={doChange}
>
Choose
{[1,2,3,4,5].map((val,ind) =>
{val}
)}

Here's a CodeSandbox that captures the issue: https://codesandbox.io/s/positionedmenu-material-demo-forked-pul8o

Context 🔦

Packages:
"@mui/icons-material": "^5.0.4",
"@mui/lab": "^5.0.0-alpha.51",
"@mui/material": "^5.0.4",
"@mui/styles": "^5.0.1",

Order Id

21172

[Unit2795]

Also having this issue, also run into buttons, accordions, and switches losing styles between page navigation.

Will have to stay on v4 for now.

[mnajdova]

@jamintz what exactly is broken on the CodeSandbox? This is what I see:

[jamintz]

@mnajdova not sure what to tell you – https://codesandbox.io/s/focused-mendel-02gu3? works fine for me (vertical list as expected). However when I run the same component within my project I get a horizontal mess. Screenshot / code / packages for comparsion. At least one other person is having the same issue here: mui/mui-x#2879, and from skimming issues seems like others as well

[jamintz]

mui/mui-x#2919 seems to be the issue, removing DataGrid from the same page fixes it

[Unit2795]

This was probably my issue as well, will check soon.

Thank you!

[prandev01]

Yes, The same bug on my end. MUI v5 select menu items merged horizontally

<div>
    <Select>
         <MenuItem value={''}>Sort By</MenuItem>
          <MenuItem value={'auctionEnd'}>End Time</MenuItem>
          <MenuItem value={'minPrice'}>Min Price</MenuItem>
          <MenuItem value={'highestBid'}>Highest Bid</MenuItem>
    </Select>
      <DataGrid
          rows={listings}
          columns={columns}
          pageSize={20}
          rowsPerPageOptions={[10, 20, 50, 100]}
          onRowClick={handleRowClick}
          autoHeight={true}
      />
 </div>

---

------ RESULT ---------------------------------------------------------------------------------------------------------

[stobrien89]

can confirm that upgrading to mui/x-data-grid > 5.0.0 resolves this issue (for me).

[JeremyRubin]

not sure about these fixes? I'm on 5.2.0 and still having this issue (also took a long while to even find this thread, is this in upgrade guide anwhere?)

[rerdavies]

I experienced this issue after a botched upgrade. This seems to be a symptom of still having references to @material-ui modules in your project.

For me, the issue was that files which failed migration were still referencing @material-ui modules. And when these modules import the old "@Material-ui/core/MenuItem" module, it overwrites the equivalent @mui code! (Would have thought that the node module system was more robust than that but it is not. And I would have thought the react compile procedure would detect colliding modules at compile or runtime; but it does not!).

The fix: complete the migration, of failed modules, and eliminate all references to @material-ui modules, and the problem corrects itself.

[mnajdova]

Instruction have been added in the troubleshooting section of the migration guide - https://mui.com/guides/migration-v4/#styles-broken-after-migrating-to-v5

I hope this will help other folks who come in this issue.

[danlg]

this issue is still open for me using "@mui/material": "^5.6.1". No mui/x-data-grid used nor @material-ui. For top level component, it works but when adding inside react-router-dom, it breaks. The Layout creates the conflict:

<Router>
      <Switch>
        <UserContext.Provider value={[user, setUser]}>
          <Layout> //<- this creates the conflict
            <Route path='/' component={Home} />  // Home render the MUI Select

Layout.js

import Header from './header';

const Layout = (props) => (
  <>
    <Header />
    <main>
      <div className='container'>{props.children}</div>
    </main>
    <style>{`
      * {
        font-family: sans-serif !important;
        outline: none;
      }
      .container {
        max-width: 42rem;
        margin: 0 auto;
        padding: 0 10px;
      }
    `}</style>
  </>
);

export default Layout;

I suspect

<div className='container'>{props.children}</div> 

to be the issue

[hfelek]

I had the same issue. I have a point but I don't know what real issue might be.

When I import Table Container from another file alignment for dropdown list becomes horizonta
l as below.

I just imported simple TableContainer component like:

import TableContainer from "@mui/material/TableContainer";
const foo=()=>{
return (


}

If I comment out TableContainer my alignment gets back to vertical like as I wish:
Code for the image shown above is that:

    import { MenuItem as MenuItem1 } from "@mui/material/";
    import { Select } from '@mui/material';
    import foo from ....


           ...
        return (
          <Select

            style={{ minWidth: 200, textAlign: "start" }}
            id={rowData.Index + "select"}
            value={
              filteredData.find((key) => key.Index === rowData.Index).Value
            }
            onChange={(event) => {
              handleChangeDropDownList(event, rowData.Index);
            }}
          >
            {enumNameObjects
              .find(
                (key) =>
                  key.Name ===
                  SensorVariablesObject.find(
                    (key1) => key1.Index === rowData.Index
                  ).Options.EnumObject
              )
              .EnumObject.map((item, index) => {
                return (
                  <MenuItem1 value={item.Value}>{item.Text}</MenuItem1>
                );
              })}
          </Select>

I guess that after adding MaterialTable, a style prop is overwritten that affects my component where I make import to . This might help maybe.

[rgouzal]

@flaneur Were you able to find a solution for this?

[hfelek]

@rgouzal Were you able to find a solution for this?
Issue is discussed here. I fixed the problem. I also removed "material-table": "^1.69.2" from package.json which prob depends on "@material-ui/core": "^4.10.2"

https://stackoverflow.com/questions/69309151/material-ui-5-datagrid-styles-are-not-isolated-between-components

[rgouzal]

@flaneur oh I see it makes sense, thank you.

[penggaolai]

The menu item issue is still happening to me. We are trying to upgrade from v4 to v5. Any workaround? I also have DatePicker issue. We were using KeyboardDatePicker. After I I replaced it with DatePicker imported from @mui/lab in v5, I calendar would not show up.

[mnajdova]

@penggaolai please share a reproduction or open a new issue if it is not related to the comments above. Note that the pickers are moved to MUI X. Read more about it here - https://mui.com/blog/lab-date-pickers-to-mui-x/