CODEWITHSUNDEEP
reactjsdropdownreact-selectreact-select-search
Anoosh Mr
Anoosh Mr

Reputation: 21

react-select, AsyncSelect only able to select one option even i added isMulti after that it display no options

I can select first option successfully, but after that it doesn't display any option, can't add second option and I even added isMulti.

import React from "react";
import AsyncSelect from "react-select/async";
import makeAnimated from "react-select/animated";
import { options } from "../colorOptions";
import chroma from "chroma-js";

const animatedComponents = makeAnimated();

export const SelectBox = () => {
  const loadOptions = (searchValue, callback) => {
    console.log(searchValue);

    setTimeout(() => {
      const filteredOptions = options.filter((option) =>
        option.name.toLowerCase().includes(searchValue.toLowerCase())
      );

      console.log(filteredOptions);

      callback(filteredOptions);
    }, 1000);
  };

  const colorStyles = {
    control: (styles) => ({ ...styles, backgroundColor: "white" }),
    option: (styles, { data, isDesable, isFocused, isSelected }) => {
      return { ...styles, color: data.colorCode };
    },
    multiValue: (styles, { data }) => {
      const color = chroma(data.colorCode);
      return {
        ...styles,
        backgroundColor: color.alpha(0.1).css(),
        color: data.colorCode
      };
    },
    multiValueLabel: (styles, { data }) => ({
      ...styles,
      color: data.colorCode
    })
  };

  return (
    <AsyncSelect
      key={options.length}
      loadOptions={loadOptions}
      option={options}
      closeMenuOnSelect={false}
      components={animatedComponents}
      isMulti
      defaultOptions
      styles={colorStyles}
    />
  );
};

code sandbox link: https://codesandbox.io/s/dreamy-water-j2m55v?file=/src/components/SelectBox.jsx:0-1401

code sandbox link: https://codesandbox.io/s/dreamy-water-j2m55v?file=/src/components/SelectBox.jsx:0-1401

Upvotes: 2

Views: 574

Answers (1)

Anoosh Mr
Anoosh Mr

Reputation: 21

my mistake

i should provide my collection of option in this format

export const options = [ { id: 1, value: "Red", colorCode: "#FF0000", label: "Red" }, ];

when i change to this format the code works

Upvotes: 0

Related Questions