If any option from a Group is selected, then all options in other group should get disabled using Ant design (OptGroup, Option) - React.js

user_8189325 0
Viewed 366

How i can implement multiple select behavior If i start selected from one section, the another section will get disabled from selection. I tried many methods for do it but, i faced problem in logic how can implement it.

Code here. Stackblitz.com

Image - How should it look

export default function App() {
  const [datas, setDatas] = React.useState(initialState);
  const [selectedItems, setSelectedItems] = React.useState([]);

  const onChange = option => {
    setSelectedItems(option);

    // code here
  };

  function tagRender(props) {
    const { value, closable, onClose } = props;

    return (
      <Tag
        color="blue"
        closable={closable}
        onClose={onClose}
        style={{ marginRight: 3 }}
      >
        {value}
      </Tag>
    );
  }

  return (
    <Select
      mode="multiple"
      value={selectedItems}
      tagRender={tagRender}
      style={{ width: "100%" }}
      onChange={onChange}
      menuItemSelectedIcon={null}
    >
      {datas.map(data => (
        <OptGroup label={data.groupName} key={data.groupName}>
          {data.options.map(option => (
            <Option value={option.value} key={option.value}>
              <Checkbox
                style={{ pointerEvents: "none" }}
                type="checkbox"
                checked={selectedItems.indexOf(option.value) !== -1}
              >
                {option.value}
              </Checkbox>
            </Option>
          ))}
        </OptGroup>
      ))}
    </Select>
  );
}
antd reactjs javascript
1 Answers

Try append disabled option to data upon selected items changed.

This is full code

export default function App() {
  const [datas, setDatas] = React.useState(initialState);
  const [selectedItems, setSelectedItems] = React.useState([]);

  const onChange = option => {
    setSelectedItems(option);

    // code here
    const newData = datas.map((data) => {
      if (!data.options.map(each => each.value).includes(option[0])) {
        return {
          groupName: data.groupName,
          options: data.options.map(each => {
            return { value: each.value, disabled: true }
          })
        };
      }
      return data;
    })

    if (option.length > 0) {
      setDatas(newData);
    } else {
      setDatas(initialState);
    }
    // code here
  };

  function tagRender(props) {
    const { value, closable, onClose } = props;

    return (
      <Tag
        color="blue"
        closable={closable}
        onClose={onClose}
        style={{ marginRight: 3 }}
      >
        {value}
      </Tag>
    );
  }

  return (
    <Select
      mode="multiple"
      value={selectedItems}
      tagRender={tagRender}
      style={{ width: "100%" }}
      onChange={onChange}
      menuItemSelectedIcon={null}
    >
      {datas.map(data => (
        // added disabled for both option and checkbox
        <OptGroup label={data.groupName} key={data.groupName}>
          {data.options.map(option => (
            <Option value={option.value} key={option.value} disabled={option?.disabled ?? false}>
              <Checkbox
                style={{ pointerEvents: "none" }}
                type="checkbox"
                checked={selectedItems.indexOf(option.value) !== -1}
                disabled={option?.disabled ?? false}
              >
                {option.value}
              </Checkbox>
            </Option>
          ))}
        </OptGroup>
      ))}
    </Select>
  );
}
user_139175340
Related