Nested Async Select with forwardRef can't show the initial selected value from the backend

[edward1127]

Does anyone know why when I make the AsyncSelect nested with forwardRef, it will then have a problem displaying the initial selected value from the backend?

This works. The backend selected value will be set as the initial value and displayed correctly.

        <Controller
          name="subjects"
          control={control}
          defaultValue={[]}
          render={({ field }) => (
            <AsyncSelect
              placeholder="Select Subjects"
              isClearable
              isMulti
              label="Subjects"
              loadOptions={fetchSubjectOptions}
              cacheOptions
              defaultOptions
              returnOption={true}
              getOptionLabel={(option) => option.name}
              getOptionValue={(option) => option.id}
              {...field}
            />
          )}
        />

This won't show the initial selected value from the backend, but the following values can be set and displayed correctly.

        <Controller
          name="subjects"
          control={control}
          defaultValue={[]}
          render={({ field }) => (
            <LabelAsyncSelect
              placeholder="Select Subjects"
              isClearable
              isMulti
              label="Subjects"
              loadOptions={fetchSubjectOptions}
              cacheOptions
              defaultOptions
              returnOption={true}
              getOptionLabel={(option) => option.name}
              getOptionValue={(option) => option.id}
              {...field}
            />
          )}
        />

import React, { forwardRef} from "react";

import { cn } from "@/lib/style";
import { Label } from "./Label";
import AsyncSelect, { SelectProps } from "../Select/AsyncSelect";
import { ErrorMessage } from "./ErrorMessage";
import { FieldErrors } from "@/interfaces/error-message";
import { IDropdownOption } from "@/interfaces";

export interface LabelAsyncSelectProps extends SelectProps {
  label: string | React.ReactNode;
  labelClassName?: string;
  rootClassName?: string;
  errors: FieldErrors;
  name: string;
  options: IDropdownOption[];
  labelPosition?: "top" | "left";
  onChange: (value: any) => void;
}

const LabelAsyncSelect = forwardRef<HTMLSelectElement, LabelAsyncSelectProps>(
  (
    {
      rootClassName,
      classNames,
      label,
      labelPosition = "top",
      labelClassName,
      errors,
      ...props
    },
    ref
  ) => {
    return (
      <div
        className={cn(
          labelPosition === "left" && "grid grid-cols-3 items-center w-full",
          rootClassName
        )}
      >
        <Label className={labelClassName}>{label}</Label>
        <AsyncSelect classNames={classNames} ref={ref} {...props} />
        <ErrorMessage errors={errors} name={props.name} />
      </div>
    );
  }
);

LabelAsyncSelect.displayName = "LabelAsyncSelect";

export default LabelAsyncSelect;

"use client";
import ClientOnly from "@/app/clientOnly";
import React from "react";
import ReactAsyncSelect from "react-select/async";
import { IDropdownOption } from "@/interfaces";
import { Props } from "react-select";
import { cn } from "@/lib/style";
export interface SelectProps extends Props {
  isMulti?: boolean;
  options: IDropdownOption[];
  onChange: (value: any) => void;
  value?: any[] | any;
  returnOption?: boolean;
  size: "sm" | "md" | "lg";
}
const sizeMap = {
  sm: "min-h-[2rem] h-[2rem] w-full",
  md: "min-h-[3rem] h-[3rem] w-full",
  lg: "min-h-[4rem] h-[4rem] w-full",
};

const AsyncSelect = React.forwardRef<HTMLSelectElement, SelectProps>(
  (
    {
      onChange,
      value,
      className,
      size = "md",
      isMulti,
      options,
      returnOption = true,
      getOptionLabel = (option) => option.name,
      getOptionValue = (option) => option.code,
      ...props
    },
    ref
  ) => {
    console.log(value);
    return (
      <ReactAsyncSelect
        innerRef={ref}
        classNames={{
          control: () => cn(sizeMap[size], "text-black"),
        }}
        theme={(theme) => ({
          ...theme,
          borderRadius: "0.5rem",
          colors: {
            ...theme.colors,
            primary25: "hotpink",
            primary: "black",
          },
        })}
        classNames={{
          container: () => "col-span-2",
          control: () => cn(sizeMap[size], className, "text-black"),
        }}
        isMulti={isMulti}
        getOptionLabel={getOptionLabel}
        getOptionValue={getOptionValue}
        onChange={(val) => {
          if (returnOption) {
            onChange(val);
          } else {
            isMulti
              ? onChange(val?.map((c) => getOptionValue(c)))
              : onChange(getOptionValue(val));
          }
        }}
        value={
          isMulti
            ? options?.filter((c) => {
                value?.includes(getOptionValue(c));
              })
            : options?.find((c) => getOptionValue(c) === value)
        }
        {...props}
      />
    );
  }
);

AsyncSelect.displayName = "AsyncSelect";
export default AsyncSelect;