Skip to content

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

@o-lie

Description

@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.
Image
  1. Use the auto translate option and choose a language (for example "Polish").
Image
  1. Try to change the month of the calendar by clicking the next arrow:
Image
  1. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions