[Date Picker Screen Jumps]: When the range calendar dates are picked the second time, the screen jumps to the right or down

[sotohata]

Description

Issue
We've noticed that when the Range Date Picker is placed in a certain position on a page and when the date is selected the second time, the screen jumps to either right or below.

Issue 1) Jumps to the right
https://screencast-o-matic.com/watch/c3eUF9VqIuD

Issue 2) Jumps below
https://screencast-o-matic.com/watch/c3eUFsVqIt1

Observation
For Issue 1 ) Jumps to the right

• When the component is placed on the right side of the page, it jumps.
• We've tested by using your Lit element Storybook and adding CSS style padding: 0 1000px to the component. The jump happens when selecting a date the second time.
• It stops happening when adding the below CSS style to overwrite width:100%.

:host(bx-date-picker) #floating-menu-container {width: auto;}

For Issue 2 ) Jumps to below

• When the component is placed on a tall page, it jumps.
• We've tested by using your storybook and adding CSS style margin: 1000px 0 to the component. The jump happens when selecting a date the second time.
• We've tested that it doesn't happen in the Carbon Live Demo page with the same procedure.

Component(s) impacted

Range Date Picker https://web-components.carbondesignsystem.com/?path=/docs/components-date-picker--range-with-calendar

Browser

Chrome

Carbon Web Components version

v1.19.0

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

https://klickinc.github.io/klick-genome-component-registry/?path=/story/components-date-picker--date-range&globals=measureEnabled:false

CodeSandbox example

https://web-components.carbondesignsystem.com/?path=/docs/components-date-picker--range-with-calendar

Steps to reproduce the issue (if applicable)

Place the Range Date Picker web component in either

• Wide page (Issue 1)
• Tall page (Issue 2)

1. Select a date range
2. Change either start/end date by selecting a date from the calendar
3. The page jump happens

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[stale]

We've marked this issue as stale because there hasn't been any activity for 60 days. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.