Skip to content
This repository was archived by the owner on Jul 19, 2025. It is now read-only.
This repository was archived by the owner on Jul 19, 2025. It is now read-only.

Calendar renders in top-left corner with React Hook Form inputRef #2022

@dandv

Description

@dandv

I think I'm running into a regression or new incompatibility with React Hook Form. This sample worked fine with MUI Pickers 4.0.0-alpha7 and MUI 4.9.14, but with MUI 4.11.0 and Pickers alpha 10, the picker is positioned at (0,0) and clicking the calendar icon triggers this error message:

Warning: Failed prop type: Material-UI: The anchorEl prop provided to the component is invalid.
It should be an HTML element instance or a referenceObject

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

image

Expected Behavior 🤔

The calendar should render under the Text input, which does happen if the inputRef prop is not passed to the <Text>.

Steps to Reproduce 🕹

Click the calendar icon in the Code sandbox.

Metadata

Metadata

Assignees

No one assigned

    Labels

    supportAsk on StackOverflow

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions