How to disable some options in "Select" component of Material-UI like in "Autocomplete"?

Question

is there is any way to disable some options in the Select component like in Autocomplete

PS: the option is in an array

 <FormControl variant="outlined">
        <InputLabel>States</InputLabel>
        <Select native
          defaultValue=""
          // value={value}
          onChange={inputEvent}
          label="States"
        >
          {fetchedStates.map((states, i) => (
            <option key={states + i} value={states}>
              {states}
            </option>
          ))}
        </Select>
      </FormControl>

Answer 1

The way to do this for Select is to add the disabled property to the MenuItem (shown for the "Twenty" MenuItem in the example below).

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState("");

  const handleChange = event => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={age}
          onChange={handleChange}
          label="Age"
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem disabled value={20}>
            Twenty
          </MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

For a native Select, you instead use the disabled prop for <option>:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState("");

  const handleChange = event => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={age}
          onChange={handleChange}
          label="Age"
          native
        >
          <option aria-label="None" value="" />
          <option value={10}>Ten</option>
          <option disabled value={20}>
            Twenty
          </option>
          <option value={30}>Thirty</option>
        </Select>
      </FormControl>
    </div>
  );
}

If the options are in an array, you just need to have some way of determining which options should be disabled. The example below shows one way of doing this where the option data contains whether or not the option should be disabled.

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
}));

const options = [
  { value: 10, label: "Ten" },
  { value: 20, label: "Twenty", disabled: true },
  { value: 30, label: "Thirty" }
];

export default function SimpleSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState("");

  const handleChange = event => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={age}
          onChange={handleChange}
          label="Age"
          native
        >
          <option aria-label="None" value="" />
          {options.map(option => (
            <option value={option.value} disabled={option.disabled}>
              {option.label}
            </option>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}