Disable options based on currently selected option with Material UI Autocomplete component

user_17352183 0
Viewed 3155

I am creating an Autocomplete element using Material UI, React Hook Form, and Yup that allows a user to choose multiple inputs for the days of the week.

If a user chooses the "Every day" option, I want to disable being able to choose Sunday, Monday, Tues... etc. How would I do that using getOptionDisabled?

Here is my current code...

const daysOfWeekSuggestions = [
    {label: "Every day"},
    {label: "Sunday"},
    {label: "Monday"},
    {label: "Tuesday"},
    {label: "Wednesday"},
    {label: "Thursday"},
    {label: "Friday"},
    {label: "Saturday"}
];

<Autocomplete
    disableClearable
    disablePortal
    filterSelectedOptions
    multiple
    getOptionLabel={(option) => option.label}
    id="days-autocomplete"
    options={daysOfWeekSuggestions}
    renderInput={(params) => <TextField
        required
        error={errors.daysOfWeek ? true : false}
        id="daysOfWeek"
        label="Days of the week"
        name="daysOfWeek"
        type="search"
        {...params}
        {...register("daysOfWeek")}
    />}
/>
material-ui reactjs autocomplete
2 Answers
user_132019840

What you need to do is use the getOptionDisabled prop and then check to see if the user has already selected Every Day. Im guessing you are saving it into state similar to how I am using it here so you can then just use the .some function to see if the Every day object is in the values array.

const daysOfWeekSuggestions = [
  { label: "Every day" },
  { label: "Sunday" },
  { label: "Monday" },
  { label: "Tuesday" },
  { label: "Wednesday" },
  { label: "Thursday" },
  { label: "Friday" },
  { label: "Saturday" }
];

export default function DaysOfTheWeekSelect() {
  const [value, setValue] = React.useState([]);

  const handleOnChange = (e, value) => {
    setValue(value);
  };

  return (
    <Autocomplete
      disableClearable
      disablePortal
      multiple
      getOptionLabel={(option) => option.label}
      id="days-autocomplete"
      onChange={handleOnChange}
      options={daysOfWeekSuggestions}
      getOptionDisabled={(option) => {
        if (value.some((day) => day.label === "Every day")) {
          return true;
        }
        if (value.some((day) => day.label === option.label)) {
          return true;
        }
        return false;
      }}
      value={value}
      renderInput={(params) => (
        <TextField
          required
          error={errors.daysOfWeek ? true : false}
          id="daysOfWeek"
          label="Days of the week"
          name="daysOfWeek"
          type="search"
          {...params}
          {...register("daysOfWeek")}
        />
      )}
    />
  );
}

I also made it that if you have already selected a value then it would be disabled as well. Just seems a little bit better than just filtering out the selected values

user_82182030
Related