Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Incorrect DatePicker FloatingCalendar positioning with React 19 #3969

Closed
jpveooys opened this issue Dec 2, 2024 · 0 comments · Fixed by #3974
Closed

Incorrect DatePicker FloatingCalendar positioning with React 19 #3969

jpveooys opened this issue Dec 2, 2024 · 0 comments · Fixed by #3974
Assignees
@thyhjwb6
Labels
Package: react-component-library Package/code type Size: Medium Assessed as medium task Type: Bug Inconsistencies or issues which have caused a problem for users or implementors

Comments

@jpveooys
Copy link
Collaborator

jpveooys commented Dec 2, 2024 •
edited
Loading

Steps to reproduce

  1. In packages/react-component-library, run pnpm add react@latest react-dom@latest

  2. Start Storybook

  3. Go to http://localhost:6006/iframe.html?globals=&args=&id=components-date-picker--default&viewMode=story

  4. Click the DatePicker calendar button.

Observe that the calendar appears in the wrong place.

Additional details

Next.js 15 requires the use of React 19 when using the app router.

The inline styles applied by react-popper are incorrect in this case. Simply replacing react-popper with @floating-ui/react didn't seem to fix the problem. However, the latter has a different API and a lot more functionality so switching to it may still be needed to fix the problem.

Screenshot

image
@jpveooys jpveooys added Type: Bug Inconsistencies or issues which have caused a problem for users or implementors Package: react-component-library Package/code type Status: Awaiting triage Issues not yet triaged by the Design System cra-template-royalnavy labels Dec 2, 2024
@m7kvqbe1 m7kvqbe1 added Size: Medium Assessed as medium task and removed Status: Awaiting triage Issues not yet triaged by the Design System cra-template-royalnavy labels Dec 4, 2024
@m7kvqbe1 m7kvqbe1 moved this to Candidates for Ready in Tactical Board Dec 4, 2024
@jpveooys jpveooys changed the title Incorrect DatePicker FloatingCalendar positioning with React 19 RC Incorrect DatePicker FloatingCalendar positioning with React 19 Dec 6, 2024
@thyhjwb6 thyhjwb6 self-assigned this Dec 16, 2024
@thyhjwb6 thyhjwb6 moved this from Candidates for Ready to In Progress in Tactical Board Dec 16, 2024
@thyhjwb6 thyhjwb6 mentioned this issue Dec 19, 2024
Merged
3 tasks
@github-project-automation github-project-automation bot moved this from In Progress to Done in Tactical Board Dec 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@thyhjwb6 thyhjwb6

Labels
Package: react-component-library Package/code type Size: Medium Assessed as medium task Type: Bug Inconsistencies or issues which have caused a problem for users or implementors
Projects
Tactical Board
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix FloatingBox merged refs being overwritten by ref prop in React 19 Royal-Navy/design-system
3 participants
@m7kvqbe1 @thyhjwb6 @jpveooys