Options values as number type

[lucksp]

I was converting an old Chakra Select to this library because of some bugs. We ran into an issue where the options shape we were passing looks like:

{
  label: string;
  value: number;
}

The dropdown would not work....i was scratching my head until I tried value.toString() and it works! Now I have to convert the form values back to numbers so the API works when I send the form body.

Is this expected, to not work with numbers?

[csandman]

This is the expected behavior of the base package react-select as far as I'm aware, but there is an easier way to avoid having to convert your values to strings and back again. If you use the getOptionValue prop on the select and do your .toString() in there, it will not affect the base list of options or the submitted values, only what the select uses internally.

<Select
  getOptionValue={({ value }) => value.toString()}
/>

Here's a complete example:

import React, { useState } from "react";
import { Button, Container, FormControl, FormLabel } from "@chakra-ui/react";
import { Select } from "chakra-react-select";

const options = [
  {
    label: "One",
    value: 1
  },
  {
    label: "Two",
    value: 2
  },
  {
    label: "Three",
    value: 3
  }
];

const Example = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const alertOptions = () => {
    alert(JSON.stringify(selectedOptions, null, 2));
  };

  return (
    <Container mb={16}>
      <FormControl p={4}>
        <FormLabel>chakra-react-select number value demo</FormLabel>
        <Select
          isMulti
          name="numbers"
          options={options}
          placeholder="Select some numbers..."
          closeMenuOnSelect={false}
          value={selectedOptions}
          onChange={setSelectedOptions}
          getOptionValue={({ value }) => value.toString()}
        />
      </FormControl>

      <Button m={4} onClick={alertOptions}>
        Submit
      </Button>
    </Container>
  );
};

export default Example;

https://codesandbox.io/s/chakra-react-select-number-values-kdo9jy?file=/example.js

[lucksp]

amazing. thank you for the quick answer!