Where can be found all MenuProps attributes of a Select in Material UI

Viewed 6390

Having the next Material UI Select, I've found that one can modify its behavior and appearence.

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

class SimpleSelect extends React.Component {
  state = {
    age: 10
  };

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    return (
      <Select
        value={this.state.age}
        onChange={this.handleChange}
        inputProps={{
          name: "age",
          id: "age-simple"
        }}
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    );
  }
}

export default SimpleSelect;

This is the above one with MenuProps added, also a sandbox where I'm playing with it.

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

class SimpleSelect extends React.Component {
  state = {
    age: 10
  };

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    return (
      <Select
        value={this.state.age}
        onChange={this.handleChange}
        inputProps={{
          name: "age",
          id: "age-simple"
        }}
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    );
  }
}

export default SimpleSelect;

My question is: where can I find all the possible attributes (like anchorOrigin, transformOrigin, etc) available for it?

I want to make the dropdown wider and also to add checkboxes for each dropdown item but I don't know what MenuProps attributes to access.

1 Answers

The starting point for finding this is the Select API documentation: https://material-ui.com/api/select/. Within the Props section you will find MenuProps:

MenuProps     object     Props applied to the Menu element.

In the above, the word "Menu" links to the Menu API documentation. You may look at that and say "but where is anchorOrigin and transformOrigin?"

At the end of the Menu Props API documentation, you will find the following:

Any other props supplied will be provided to the root element (Popover).

In the above, the word "Popover" then links to the Popover API documentation (where you will find anchorOrigin and transformOrigin).

At the end of the Popover Props API documentation, you will find the following:

Any other props supplied will be provided to the root element (Modal).

Similarly, in the above, the word "Modal" links to the Modal API documentation. So the full props available on Menu are the combination of all the props documented for Menu, Popover, and Modal. There is some work in progress to improve the documentation to provide more direct access to all the applicable props: https://github.com/mui-org/material-ui/issues/18288.

Related