Atlaskit DatePicker UI bug when used inside Modal Dialog

I’m experiencing a UI bug that occurs when I place two date picker components side-by-side within a modal dialog. When clicking on the date picker, the calendar gets displaced to the left side of the screen. This happens at random and occurs about 50% of the time for me. I’ve attached a video and a CodeSandbox demonstrating this.

Video: Loom | Free Screen & Video Recording Software | Loom
CodeSandbox: datetime-picker-default - CodeSandbox

Hey @rcsr, thanks for raising this issue.

I found that opening the datetime-picker whilst the modal is “transitioning” seems to reproduce the error consistently :thinking:. This is likely to do with the underlying pop-up library + modal animation throwing off the positioning calculation.

I’m going to spin up a ticket for you to follow along with, in the future you can raise tickets directly on our The Design System Jira Service Management.

Let’s continue the discussion here: Queues - Jira Service Management - Ecosystem Jira

2 Likes

Thanks for looking into this and raising the ticket DS-7800 @DanielDelCore!

One correction though:

in the future you can raise tickets directly on our The Design System Jira Service Management

There seem to be internal communication gaps at Atlassian regarding the official support channels, insofar that service desk has a banner that literally advises “Ecosystem developers [to] please post on the developer community”:

So @rcsr did the right thing by posting here, even though your advise seems to be more aligned with the recent changes around the New Developer and Marketplace Support Page and Service Desk, which aims to move bug reports away from this community towards the new Developer and Marketplace support landing page and backing Ecosystem service desk portal, which also includes the referenced Design System Support portal.

Could you please clarify your team’s intent and adjust the banner and guidance so that ecosystem developers can easily discover the correct support channel?

1 Like

Thank you for looking into this!