Calendar breaks in Safari when auto-translate is enabled and throws an error

[o-lie]

Description When using Safari with the built-in auto-translate feature enabled, navigating between months in the React Datepicker calendar causes a console error. The calendar does not change the month, the whole page goes blank and the following error is thrown: NotFoundError: The object can not be found here.

Also the UI of the calendar breaks after the translation:

• Header text overlaps (month/year collides with the popover edge).
• Weekday labels run together (no spacing) and overflow the grid.
• Day grid becomes misaligned; numbers wrap/stack vertically.
• Overall layout shifts and clipping appears.

To Reproduce Steps to reproduce the behavior:

1. In the Safari browser go to https://reactdatepicker.com.

2. Use the auto translate option and choose a language (for example "Polish").

3. Try to change the month of the calendar by clicking the next arrow:

5. See error in the console: "NotFoundError: The object can not be found here."

Expected behavior The calendar should switch months correctly and show all the content like before, regardless of whether auto-translate is enabled.

Desktop:

• OS: MacOS
• Browser Safari
• Version 18.5

Smartphone:

• Device: iPhone 15 Pro
• OS: iOS 18.5
• Browser Safari

[ilchenkoArtem]

We have two way:

1. Easy way, just set translate=no to the root of Calendar component
2. Rewrite the layout to use block elements; after that, Safari will not merge the columns (but I am not sure)

I prefer the first option because this library supports custom translations by date-fns

What do you think @martijnrusschen?