Semantic react ui dropdown multiple selection: option to Select All

Question

I am developing a react application based on hooks and for multi select dropdown am using react semantic ui Dropdown. But there is no option to Select All items. How to acheieve this? On click of Select All all the items should be selected and not be shown in the dropdown:-

import React, { useState } from "react";
import { Dropdown } from "semantic-ui-react";

const options = [
  { key: "select all", text: "Select All", value: "Select All" },
  { key: "angular", text: "Angular", value: "angular" },
  { key: "css", text: "CSS", value: "css" },
  { key: "design", text: "Graphic Design", value: "design" },
  { key: "ember", text: "Ember", value: "ember" },
  { key: "html", text: "HTML", value: "html" },
  { key: "ia", text: "Information Architecture", value: "ia" },
  { key: "ux", text: "User Experience", value: "ux" }
];

const DropdownExampleMultipleSelection = () => {
  const [selectedItems, setSelectedItems] = useState([]);
  const onChange = (event, data) => {
    setSelectedItems(data.value);

    if (data.value == "Select All") {
      console.log(data);
      console.log(event.target);
    }
  };

  return (
    <Dropdown
      placeholder="Skills"
      clearable
      fluid
      multiple
      selection
      options={options}
      onChange={onChange}
      value={selectedItems}
      label="Skills"
    />
  );
};

export default DropdownExampleMultipleSelection;

Please, include the code you already have. This will let the community give you a better anwser. — macborowy
– macborowy, Commented Aug 16, 2020 at 15:12

Domino987 · Accepted Answer · 2020-08-16 17:12:47Z

1

You need to check for the last selected items with event.target.textContent and add all options if this is selected.

const onChange = (event, data) => {
    if(event.target.textContent === 'Select All') {
      setSelectedItems(data.options.map(d => d.value))
    } else {
      setSelectedItems(data.value);
    }
  };

answered Aug 16, 2020 at 17:12

Domino987

8,8642 gold badges17 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chandra shireesha Over a year ago

I am getting a warning when I add value prop to Dropdown.Could any one help.Warning: Failed prop type: Invalid prop value supplied to Dropdown.

Domino987 Over a year ago

I think it needs to be values not value

Collectives™ on Stack Overflow

Semantic react ui dropdown multiple selection: option to Select All

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related