How to set the default value on select element

[emaborsa]

I am working on a project, implemented react-hook-form, working fine with input elements, but for select elements I am not able to set the default value (initial value).

This is my Select component:

import classNames from "classnames";
import { forwardRef } from "react";
import inputStyles from "./Input.module.css";

type Props = JSX.IntrinsicElements["select"] & {
  isInvalid?: boolean;
};

const Select = forwardRef<HTMLSelectElement, Props>(({ isInvalid, ...props }, ref) => (
  <select
    ref={ref}
    {...props}
    className={classNames(inputStyles.input, props.className, {
      [inputStyles.invalid]: isInvalid,
    })}
  />
));

export default Select;

Is use it followings:

<Select
  id={"an id"}
  {...register("itemId", {
    required: true,
  })}>
     {items.map((m) => (
       <option value={i.id} key={i.id}>{m.name}</option>
     ))}
</Select>

Where register comes from useForm passing the default values:

  const { register } = useForm({
    itemId: initialValue
  });

I am able to fix it adding selected={i.id == initialValue} to the option elements, but I am sure it is not the right way to do it. I already asked ChatGPT, it told me to add defaultValue={defaultValue} to my component, because: For <input> fields, react-hook-form automatically manages the initial value. However, <select> elements require an explicit defaultValue prop to indicate which option should be initially selected.

But it still does not work.

Could somebody give me some hint?

[emaborsa]

After hours I think the problem was a race condition, since the Select component is re-rendered once the async items are loaded but the options elements are not, or something like that. I tested it setting the items static, no async load and no re-render of the components, and it worked. I decided to move the rendering of the options into the select component and omitting the children:

import classNames from "classnames";
import { Ref, forwardRef } from "react";
import inputStyles from "./Input.module.css";

type Props<T> = Omit<JSX.IntrinsicElements["select"], "children"> & {
  isInvalid?: boolean;
  items: T[];
  render: (item: T) => { value: string; display: string };
};

function SelectComponent<T>({ isInvalid, items, render, ...rest }: Props<T>, ref: Ref<HTMLSelectElement>) {
  return (
    <select
      ref={ref}
      {...rest}
      className={classNames(inputStyles.input, rest.className, {
        [inputStyles.invalid]: isInvalid,
      })}
    >
      {items.map((item, index) => {
        const { display, value } = render(item);
        return (
          <option key={index} value={value}>
            {display}
          </option>
        );
      })}
    </select>
  );
}

const Select = forwardRef(SelectComponent) as <T>(
  props: Props<T> & { ref?: Ref<HTMLSelectElement> }
) => ReturnType<typeof SelectComponent>;

export default Select;

If somebody has a solution using the option elements as children, please let me know.

[Phibee]

Can you provide CSB bro?. i believe you're doing right way now. Coz the previous code you've created is you're creating Custom Select Component but you're still passing options element to it as a children.

[emaborsa]

CSB? You mean a sanbox? Well, if I find the time...

[lamarovan]

render: (item: T) => { value: string; display: string };
&
const { display, value } = render(item);

Is the render function necessary in order for the value to be selected automatically?