Improve docs about customizing the dropdown

[gpbl]

[Sparticuz]

It seems I'm looking for info on this right now.

I'm making custom month and year dropdowns, and have gotten them to display, however, I'm not sure how to implement the props.onChange function.

Edit: On a custom component

MonthsDropdown: (props: DropdownProps) => {
        console.log(props);
        return (
          <div className="flex items-center gap-1">
            <Select
              disabled={props.disabled}
              onValueChange={(value) => {
                console.log("monthchange", value);
                props.onChange(Number.parseInt(value, 10));
              }}
              value={props.value?.toString()}
            >
              <SelectTrigger className="hover:bg-accent hover:text-accent-foreground h-7 border-none bg-transparent px-2 py-0 text-sm font-medium">
                <SelectValue placeholder={props["aria-label"]} />
              </SelectTrigger>
              <SelectContent>
                {props.options?.map((option) => (
                  <SelectItem
                    disabled={option.disabled}
                    key={option.value}
                    value={option.value.toString()}
                  >
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        );
      },

[rodgobbi]

Hi @Sparticuz

This is tricky indeed, you need to simulate an event object when calling the function, check this comment from another discussion about this issue: https://github.com/gpbl/react-day-picker/discussions/2676#discussioncomment-11984571.

[Sparticuz]

Thanks, that's the same solution I eventually found:

onValueChange={(value) => {
  if (props.onChange) {
    // Create a synthetic event object that matches ChangeEvent<HTMLSelectElement>
    const syntheticEvent = {
      target: { value },
    } as ChangeEvent<HTMLSelectElement>;
    props.onChange(syntheticEvent);
  }
}}