How to type 'option' in ControlledSelect's 'value' and 'onChange' when returning only selected value?

[lucasrabiec]

Regarding to @csandman response in #105 (comment)

@tomocrafter sorry I never saw your comment! I hope you figured it out!

If not, here's an example of how you might do that with react-hook-form:

const ControlledSelect = ({
  control,
  name,
  id,
  label,
  rules,
  options,
  ...props
}) => {
  const {
    field: { onChange, onBlur, value, ref },
    fieldState: { invalid, error }
  } = useController({
    name,
    control,
    rules
  });

  return (
    <FormControl py={4} isInvalid={invalid} id={id}>
      <FormLabel>{label}</FormLabel>

      <Select
        name={name}
        ref={ref}
        onBlur={onBlur}
        options={options}
        value={
          options && value
            ? options.find((option) => option.value === value)
            : null
        }
        onChange={(option) => onChange(option.value)}
        {...props}
      />

      <FormErrorMessage>{error && error.message}</FormErrorMessage>
    </FormControl>
  );
};

I'm assuming in this case you only want a single select, because that's the main case you'd only want one value.

How I can achieve the same behavior and satisfy a Typescript in the cleanest way?
What type an option param must be in that generic ControlledSelect?
https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-zod-validation-typescript-forked-ypxrh5?file=/components/controlled-select.tsx:1460-1674

[csandman]

First I'd recommend checking out the react-hook-form section of the docs, as there are a bunch of examples there for multiple scenarios in JS and TS.

This example specifically has a single select made as a custom component for react-hook-form in a TS app: https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-yup-validation-typescript-phmv0u?file=/components/controlled-select.tsx

If there is anything about this example that doesn't fit your needs, let me know and I can try and make it more specific!

---

EDIT:

Ok based on your extra input I made a new example showing how you could do it with only the value. There are two main points to this change. The first is making sure the Option generic extends a { label: string, value: string } structured interface, otherwise it won't be able to infer that those keys should be there. The second is adding a function to flatten the options object when pulling out the selected value, because in some cases you could have grouped options.

For the sake of this example, I also removed the IsMulti generic and just set it to false on the Select itself. This is because this example only really makes sense with a single select. You could probably simplify this even further but the whole point of the ControlledSelect component was for it to be somewhat generically reusable.

Anyway here's the code of the new ControlledSelect:

import React from "react";
import {
  useController,
  FieldValues,
  UseControllerProps,
} from "react-hook-form";
import { FormErrorMessage, FormLabel, FormControl } from "@chakra-ui/react";
import {
  Select,
  Props as SelectProps,
  GroupBase,
  OptionBase,
} from "chakra-react-select";

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

interface ControlledSelectProps<
  FormValues extends FieldValues = FieldValues,
  Option = unknown,
  Group extends GroupBase<Option> = GroupBase<Option>
>
  extends Omit<SelectProps<Option, false, Group>, "name" | "defaultValue">,
    UseControllerProps<FormValues> {
  label?: string;
}

/**
 * An attempt to make a reusable chakra-react-select form component
 *
 * @param props - The combined props of the chakra-react-select component and the useController hook
 */
function ControlledSelect<
  FormValues extends FieldValues = FieldValues,
  Option extends SelectOption = SelectOption,
  Group extends GroupBase<Option> = GroupBase<Option>
>({
  name,
  label,
  options,
  control,
  rules,
  shouldUnregister,
  ...selectProps
}: ControlledSelectProps<FormValues, Option, Group>) {
  const {
    field: { value, onChange, ...fields },
    fieldState: { error },
  } = useController<FormValues>({
    name,
    control,
    rules,
    shouldUnregister,
  });

  const getFlatOptions = (): Option[] => {
    if (!options?.length) {
      return [];
    }

    return options.reduce<Option[]>((opts, optOrGroup) => {
      if ("value" in optOrGroup) {
        return [...opts, optOrGroup];
      }

      if ("options" in optOrGroup) {
        return [...opts, ...optOrGroup.options];
      }

      return opts;
    }, []);
  };

  const flatOptions = getFlatOptions();

  return (
    <FormControl label={label} isInvalid={!!error} id={name}>
      {label && <FormLabel>{label}</FormLabel>}
      <Select<Option, false, Group>
        options={options}
        value={
          !!flatOptions.length && !!value
            ? flatOptions.find((option) => option.value === value)
            : null
        }
        onChange={(optionOrOptions) => onChange(optionOrOptions?.value || null)}
        {...selectProps}
        {...fields}
      />
      <FormErrorMessage>{error?.message}</FormErrorMessage>
    </FormControl>
  );
}

export default ControlledSelect;

And here's a CodeSandbox for it: https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-zod-validation-typescript-only-value-single-wbedcw?file=/components/controlled-select.tsx

[csandman]

Ok I updated my answer, let me know if that answers your question!

[lucasrabiec]

Yes, this is what I want, thank you!
Could you tell me why it doesn't make sense to make it for IsMulti? It can return string[] instead of object[].

I am also wondering why Select returns value and label by default instead of only value.

[csandman]

Well I meant it doesn't make sense for your specific example because you were using it as a single select. However, it could work for both, it would just be more complicated. I could give it another shot in a way that allows for both.

I believe react-select returns both because they don't want to assume anything about what the user wants. There's a fair chance they'd want both values. I myself have had situations where the label and value were both information I needed in my selected values.

I also think its easier to get rid of the extra field you don't need than try and get it out of the options object in post (as you can see by the level of complication in this example). Personally I don't think I'd ever use this in a project of mine, I think it makes much more sense to transform the form data object on submit. Especially with how much extra code this adds.

[csandman]

Ok I gave making a component that can return just the value for a single or mutli select a shot. Fair warning, there is a lot of extra boilerplate required to properly check the type of value and to extract the value key from the selected option(s) in the onChange function.

import React from "react";
import { useController } from "react-hook-form";
import type { FieldValues, UseControllerProps } from "react-hook-form";
import { FormErrorMessage, FormLabel, FormControl } from "@chakra-ui/react";
import { Select } from "chakra-react-select";
import type {
  Props as SelectProps,
  GroupBase,
  OptionBase,
  PropsValue,
  OnChangeValue,
} from "chakra-react-select";

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

interface ControlledSelectProps<
  FormValues extends FieldValues = FieldValues,
  Option = unknown,
  IsMulti extends boolean = boolean,
  Group extends GroupBase<Option> = GroupBase<Option>
>
  extends Omit<SelectProps<Option, IsMulti, Group>, "name" | "defaultValue">,
    UseControllerProps<FormValues> {
  label?: string;
}

/**
 * An attempt to make a reusable chakra-react-select form component
 *
 * @param props - The combined props of the chakra-react-select component and the useController hook
 */
function ControlledSelect<
  FormValues extends FieldValues = FieldValues,
  Option extends SelectOption = SelectOption,
  IsMulti extends boolean = boolean,
  Group extends GroupBase<Option> = GroupBase<Option>
>({
  name,
  label,
  options,
  control,
  rules,
  shouldUnregister,
  ...selectProps
}: ControlledSelectProps<FormValues, Option, IsMulti, Group>) {
  const {
    field: { value, onChange, ...fields },
    fieldState: { error },
  } = useController<FormValues>({
    name,
    control,
    rules,
    shouldUnregister,
  });

  const getFlatOptions = (): Option[] => {
    if (!options?.length) {
      return [];
    }

    return options.reduce<Option[]>((opts, optOrGroup) => {
      if ("value" in optOrGroup) {
        return [...opts, optOrGroup];
      }

      if ("options" in optOrGroup) {
        return [...opts, ...optOrGroup.options];
      }

      return opts;
    }, []);
  };

  const flatOptions = getFlatOptions();

  const getValue = (): PropsValue<Option> => {
    // If there are no options to compare against, or no value selected, return null
    if (!flatOptions?.length || !value) {
      return null;
    }

    // value will be an array in multi select cases
    if (Array.isArray(value)) {
      // If the value array is empty, return an empty array for the value
      if (!value.length) {
        return [];
      }

      // If not empty, get a list of options by matching the values in the value array
      return flatOptions.filter((opt) => value.includes(opt.value));
    }

    // Otherwise return the single option which matches the value
    return flatOptions.find((option) => option.value === value) || null;
  };

  const onSelectChange = (newValue: OnChangeValue<Option, IsMulti>): void => {
    if (newValue) {
      if (Array.isArray(newValue)) {
        // If the new value is an array, get the `value` key out of each item
        onChange(newValue.map(({ value }) => value));
      } else if ("value" in newValue) {
        // If its not an array, its a single item which you should get the `value` from
        onChange(newValue.value);
      }
    } else {
      // If no new value, it's null and should be set as such
      onChange(newValue);
    }
  };

  return (
    <FormControl label={label} isInvalid={!!error} id={name}>
      {label && <FormLabel>{label}</FormLabel>}
      <Select<Option, IsMulti, Group>
        options={options}
        value={getValue()}
        onChange={onSelectChange}
        {...selectProps}
        {...fields}
      />
      <FormErrorMessage>{error?.message}</FormErrorMessage>
    </FormControl>
  );
}

export default ControlledSelect;

And I also made a new example for it. You'll notice for the multi select I used a set of options which are grouped. This was to show how the getFlatOptions() function comes into play.

https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-zod-validation-typescript-only-value-single-or-mutli-select-gldh1s?file=/components/controlled-select.tsx

[lucasrabiec]

Wow, thank you. Such a good work and also valuable lesson for me about your library and react-select. Also thanks for that extra example.

I believe react-select returns both because they don't want to assume anything about what the user wants.

Yea, I agree, it's reasonable.

I also think its easier to get rid of the extra field you don't need than try and get it out of the options object in post (as you can see by the level of complication in this example). Personally I don't think I'd ever use this in a project of mine, I think it makes much more sense to transform the form data object on submit. Especially with how much extra code this adds.

I think you convinced me for your approach, but IMO it also depends on the case. You know, it all has tradeoffs. In that example, you have a little bit more boilerplate but you do it once (if we assume we need only value in all the places in our code). Thanks to that we don't need to extract value in submit each time when we use select.

Overall, thank you for all your time spent on it.