JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.49k stars 4.12k forks source link

Creatable Select only works with the default option type #5747

Open miguelSoldado1 opened 11 months ago

miguelSoldado1 commented 11 months ago

Hey!

I was trying to use the CreatableSelect component with a list of options that do not match the default schema (the default looks something like this: {value:"", label:""}) and apparently when I add the prop getOptionLabel to tell the select component which parameter it should display in the options it breaks the label in the create option.

type OptionType = { color: string };

const options: OptionType[] = [
  { color: "red" },
  { color: "green" },
  { color: "blue" },
  { color: "yellow" }
];

export default function App() {
  return (
    <div>
      <CreatableSelect<OptionType, false, GroupBase<OptionType>>
        options={options}
        isSearchable={false}
        isValidNewOption={() => true}
        getOptionLabel={(o) => o.color}
        formatCreateLabel={() => "Add new"}
      />
    </div>
  );
}

The above code is also in this sandbox: https://codesandbox.io/s/createable-select-bug-3g45xt.

In this case I have a non searchable select component that lists a bunch of colors ({color:"") and i only want to trigger an api request when the "create" option is clicked. Whenever I have the getOptionLabel set to something other than "label" the create option has no label but it does render empty. If I had a label property to the colors options array it all works fine even when adding the getOptionLabel={(o) => o.label} prop.