I can't seem to find a way to set the initial selected value.

[khalidelborai]

Description

I read the docs and looked at the available examples and there is no mention of any way to set the selected value/s

chakra-react-select Version

4

Link to Reproduction

No response

TypeScript?

• Yes I use TypeScript

Steps to reproduce

No response

Operating System

• macOS
• Windows
• Linux
• iOS/iPadOS
• Android

Additional Information

No response

[csandman]

The easiest way is to create your value state before passing it into the Select.

const Example = () => {
  const [selectedColors, setSelectedColors] = useState([colorOptions[0]]);

  const [selectedColor, setSelectedColor] = useState(colorOptions[0]);

  return (
    <Container mb={16}>
      <FormControl p={4}>
        <FormLabel>chakra-react-select Multi Select</FormLabel>
        <Select
          name="colors"
          placeholder="Select some colors..."
          isMulti
          options={colorOptions}
          value={selectedColors}
          onChange={setSelectedColors}
        />
      </FormControl>

      <FormControl p={4}>
        <FormLabel>chakra-react-select Single Select</FormLabel>
        <Select
          name="colors"
          placeholder="Select a color..."
          options={colorOptions}
          value={selectedColor}
          onChange={setSelectedColor}
        />
      </FormControl>
    </Container>
  );
};

In the case of a multi-select, set your initial value to an array of option objects. In a single select, set it to just one option object.

CodeSandbox: https://codesandbox.io/s/chakra-react-select-initial-value-9gljzp?file=/example.js

[nicanorj]

Hello guys,

I've tried to apply onChange on this typescript example (https://codesandbox.io/s/chakra-react-select-ts-demo-vz9ut?file=/app.tsx) but I'm getting these erros:

(property) onChange?: ((newValue: SingleValue<ProducerOption>, actionMeta: ActionMeta<ProducerOption>) => void) | undefined
Handle change events on the select

Type 'Dispatch<SetStateAction<{ value: string; label: string; }[]>>' is not assignable to type '(newValue: SingleValue<ProducerOption>, actionMeta: ActionMeta<ProducerOption>) => void'.
  Types of parameters 'value' and 'newValue' are incompatible.
    Type 'SingleValue<ProducerOption>' is not assignable to type 'SetStateAction<{ value: string; label: string; }[]>'.
      Type 'null' is not assignable to type 'SetStateAction<{ value: string; label: string; }[]>'.ts(2322)
Select.d.ts(164, 5): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & Omit<Pick<Props<ProducerOption, false, GroupBase<ProducerOption>>, "value" | ... 44 more ... | "useBasicStyles"> & InexactPartial<...> & InexactPartial<...>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'

I'm new at typescript and frontend.

Any help would be very appreciated!

[csandman]

It appears that you're getting the setState of a single select and a multi select mixed up. If you want to do a single-select, you should have your state typed to your option type | null:

const [selectedColor, setSelectedColor] = useState<ColorOption | null>(null);

If you want to do a multi-select, you should have your state value set to a readonly array of your option type:

const [selectedColors, setSelectedColors] = useState<readonly ColorOption[]>(
  []
);

Here's a complete example:

import { useState } from "react";
import { Container, FormControl, FormLabel } from "@chakra-ui/react";
import { Select, OptionBase } from "chakra-react-select";
import { colorOptions } from "./data/data";

interface ColorOption extends OptionBase {
  label: string;
  value: string;
}

const App: React.FC = () => {
  const [selectedColor, setSelectedColor] = useState<ColorOption | null>(null);

  const [selectedColors, setSelectedColors] = useState<readonly ColorOption[]>(
    []
  );

  return (
    <Container mb={16}>
      <FormControl p={4}>
        <FormLabel>Single Select</FormLabel>
        <Select<ColorOption>
          name="single-color"
          placeholder="Select a color..."
          options={colorOptions}
          value={selectedColor}
          onChange={setSelectedColor}
        />
      </FormControl>

      <FormControl p={4}>
        <FormLabel>Multi Select</FormLabel>
        <Select<ColorOption, true>
          isMulti
          name="multiple-colors"
          placeholder="Select some colors..."
          options={colorOptions}
          value={selectedColors}
          onChange={setSelectedColors}
        />
      </FormControl>
    </Container>
  );
};

export default App;

https://codesandbox.io/s/chakra-react-select-set-state-examples-sxg9lx?file=/app.tsx

[nicanorj]

Hello Chris,

I was really doing what you said. After changes it worked perfectly.

Thank you for the quick reply!