1

I'm studying react and so using the react-multiselect-checkboxes library. I'm trying to custom the DropDownButton but without succeed.

Here is the code:

import React, { useState, useEffect } from "react";
import ReactMultiSelectCheckboxes from "react-multiselect-checkboxes";
import DropdownButton from "react-multiselect-checkboxes/lib/DropdownButton.js";

const MultiSelectAll = (props) => {
  const [selectedOptions, setSelectedOptions] = useState([]);
  
  useEffect(() => {
    setSelectedOptions([{ label: "Tutte", value: "*" }, ...props.options]);
  }, []);

  const CustomDropDownButton = (props) => { 
    return (
      <DropdownButton {...props} className={[]} onPress={(e) => e.stopProgagation()}>
        test
      </DropdownButton>
    )
  }

  return (
    <ReactMultiSelectCheckboxes
      options={[{ label: "Tutte", value: "*" }, ...props.options]}
      components={{CustomDropDownButton}}
      value={selectedOptions}
      onChange={onChange}
      setState={setSelectedOptions}
    />
  );
};

export default MultiSelectAll;

I'm using the components property but the DropDownButton is still the same select with the label plus the arrow indicator. Is there a way to custom the DropDownButton in the first way? If yes, what i'm doing wrong?

Ajeet Shah
  • 18,551
  • 8
  • 57
  • 87
July
  • 516
  • 1
  • 7
  • 25
  • 1
    [docs](https://react-select.com/components#components): try `components={{ DropdownIndicator: CustomDropDownButton }}`. Also, check [this](https://www.npmjs.com/package/react-multiselect-checkboxes#props). – Ajeet Shah Apr 13 '21 at 08:56
  • @AjeetShah thank you!! you are saving me... can I ask you, if I try to do something like this components={{ DropdownButton: CustomDropDownButton },{ Dropdown: CustomDropDown }} the ReactMultiSelectCheckboxes component take just the last one element (so in this case the CustomDropDown ). Is there a way to replace more than one comonent at once? maybe I'm writining wrong...thank you very much – July Apr 13 '21 at 10:39
  • 1
    Correct syntax should be : `components={{ DropdownIndicator: CustomDropDownButton, Foo: Bar, Something: More }}`. – Ajeet Shah Apr 13 '21 at 10:59
  • Thank you again @AjeetShah. So, last question, in order to stop the propagation of the event (because this ReactMultiSelectCheckboxes component is inside a cell of a table that has a click event) I have to override all the components and add the stop as I wrote in the CustomDropDownButton? – July Apr 13 '21 at 11:04
  • 1
    I am not sure about that part as I don't fully understand the requirement. But, you can try with `{e => { e?.stopProgagation(); e?.preventDefault(); }`. The `?` is [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining). Feel free to spend more time in trying and if you face any issue, feel free to edit your question and ask me for further help. – Ajeet Shah Apr 13 '21 at 11:17
  • 1
    They might be a few other libraries to explore - https://www.npmjs.com/package/react-multi-select-component or https://www.npmjs.com/package/multiselect-react-dropdown. You should choose one which is more popular (more weekly downloads and recent code commits and meets your requirements). – Ajeet Shah Apr 13 '21 at 11:19
  • 1
    Thank you @AjeetShah, right now as you suggested i'm using react-multi-select-component. If you can see also https://stackoverflow.com/questions/67084153/react-multi-select-component-stoppropagation-onclose if you can help me... thank you – July Apr 14 '21 at 07:04

0 Answers0