Hidden MenuItem in MenuList causes props warning

When a MenuList has a MenuItem wrapped by Hidden, a warning is generated.

Failed prop type: The following properties are not supported: tabIndex, onFocus. Please remove them.

I believe MenuList sets those properties, so even if I wanted to not set them they would get set.

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

A few issues are similar, but not exactly this issue: #12302 #12159 #11467.

Expected Behavior

The MenuItem should display on the correct screen resolution without producing warnings.

Current Behavior

The MenuItem produces warnings.

Steps to Reproduce

Link: https://codesandbox.io/s/y2vnzl1m8v

For example:

<MenuList role="menu">
  <Hidden smUp>
    <MenuItem onClick={() => {}}>
      Menu Item
    </MenuItem>
  </Hidden>
  <MenuItem onClick={() => {}}>
    Menu Item
  </MenuItem>
</MenuList>

Context

I want some menu items to display on small screen sizes. On large screen sizes they will appear as buttons outside the menu.

Your Environment

Tech	Version
Material-UI	v1.4.3
React	v16.3.2

[hypnoboutique]

import React from "react";

import { MenuItem, MenuList, useMediaQuery, useTheme } from "@material-ui/core";

const Menu = () => {
  const theme = useTheme();
  const smUp = useMediaQuery(theme.breakpoints.up("sm"));

  return (
    <MenuList role="menu">
      {smUp && <MenuItem onClick={() => {}}>Menu Item</MenuItem>}
      <MenuItem onClick={() => {}}>Menu Item</MenuItem>
    </MenuList>
  );
};

[jkrehm]

Thank you for that example. It’s very helpful.

Also, if the internal API can change so this work-around isn’t needed, even better.