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

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")}
    />}
/>

CodePudding user response：

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

CodePudding user response：

I think you need more than just getOptionDisabled option. I have done similar thing in my prev app, for that you need to add one more property called disabled to each option and onChange to Every day, manually disable remaining options.

You can check working demo here - https://codesandbox.io/s/disable-mui-autocomplete-options-on-condition-gurzb