Force DayPicker's Dropdown to Always Open Downwards and Scroll if Needed

[Abdulaziz930]

Hi,
I'm using react-day-picker, and I want the date selection dropdown to always open downwards. Currently, if there isn't enough space below, it opens upwards, which I want to prevent.

Instead, I would like:

The dropdown to always open downwards, regardless of available space.
If there isn't enough space below, the page should scroll to accommodate the dropdown rather than opening it upwards.
Is there a way to enforce this behavior? Any suggestions or workarounds would be greatly appreciated.

Thanks in advance!

[rodgobbi]

Hi @Abdulaziz930

The default dropdown component mounted by the DayPicker uses the native HTML select, and how the content of the select element is displayed is fully controlled by the browser.

If you want to control how it's displayed you'll need to use a custom Dropdown component instead.
Please check the Custom Components guide for more details.

Let me know if you have more questions and if there's any way the docs could be improved.

For reference, some examples of custom Selects:

• https://mui.com/material-ui/react-select/
• https://www.downshift-js.com/use-select
• https://www.radix-ui.com/primitives/docs/components/select

[Abdulaziz930]

Everything is clear. Thanks!