Bug: Passing onChange to Custom Dropdown component

[nickcanarelli]

Bug description

I am trying to create a custom Dropdown component and continue to receive when passing the value into the props.onChange:

Uncaught TypeError: Cannot read properties of undefined (reading 'value')

To reproduce

https://codesandbox.io/s/react-daypicker-forked-7v4skw

Steps

1. In the codesandbox

Expected behavior

What needs to be passed into the onChange?

[gpbl]

@nickcanarelli when implementing a custom navigation, you have two options:

1. replace the Dropdown via the components prop and add the proper casting to work with an HTML select with HTML option elements. I understand this is more complex than thought, hopefully will be fixed in next release.
2. replace the Caption via the components and implement your own navigation – without the limits of the Dropdown: https://react-day-picker.js.org/guides/custom-components#custom-caption. This is the preferred method when working with custom HTML dropdown.

Your Dropwdown.tsx there has no type annotations, so you can't see where are the issues:

• use DropdownProps type to make sure your custom Dropdown get the same props as DayPicker
• looping over React children could be tricky: it is not in the type definitions, but Dropdown children are always of type OptionElement[], defined as:

  type OptionProps = React.HTMLProps<HTMLOptionElement>;
  type OptionElement = React.ReactElement<OptionProps>;

See the working types here https://codesandbox.io/s/react-daypicker-forked-jwcctf?file=/src/Dropdown.tsx which fix your issue.

Thanks for reporting your experience, definitely it helps!