Hidden MenuItem in MenuList causes props warning

[jkrehm]

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

[oliviertassinari]

Using the render prop API would solve this issue. Right now, the workaround is to use an intermediary component to forward the properties MenuList is injecting into the MenuItem.

[jkrehm]

I'm not sure I understand what you mean. Do you mean pass it to MenuList as a render prop? Could I trouble you for a simple example of what you mean?

Since it's just a warning it's not the end of the world, but if there's a work-around I would love to use it to cut down on the noise in my console.

[oliviertassinari]

@jkrehm I hope that help:

import React from "react";
import Hidden from "@material-ui/core/Hidden";
import MenuList from "@material-ui/core/MenuList";
import MenuItem from "@material-ui/core/MenuItem";

// Exposes the injected properties.
const Wire = ({ children, ...props }) => children(props);

const Menu = () => (
  // MenuList is using React.cloneElement for all it's children.
  <MenuList role="menu">
    <Wire>
      {props => (
        <Hidden smUp>
          <MenuItem {...props} onClick={() => {}}>
            Menu Item
          </MenuItem>
        </Hidden>
      )}
    </Wire>
    <MenuItem onClick={() => {}}>Menu Item</MenuItem>
  </MenuList>
);

export default Menu;

https://codesandbox.io/s/74v3z864wx

[oliviertassinari]

Anyway, I think that we can remove the internal cloneElement, it would avoid using the need to introduce a render prop API.

[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.

[oliviertassinari]

I'm closing for #14943. If we solve #14943, we get this one solved too.

[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>
  );
};