[Bug]: Date Picker

[eduardoEB-dev]

Component

DatePicker (Compat)

Package version

8.106.4

React version

17.0.1

Environment

System: OS: Windows 10 10.0.19045 CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1265U Memory: 1.01 GB / 15.69 GB Browsers: Edge: Chromium (128.0.2739.54) Internet Explorer: 11.0.19041.4355 npmPackages: @fluentui/react: ^8.106.4 => 8.121.6 @types/react: 17.0.45 => 17.0.45 @types/react-dom: 17.0.17 => 17.0.17 react: 17.0.1 => 17.0.1 react-dom: 17.0.1 => 17.0.1

Current Behavior

When using SPFx version 1.19.0 and I add a DatePicker component, I can click on the text area and the date picker prompt launches I have no issues, it populates the date just fine. But if I click on the calendar icon and the prompt opens once more and I select a date, then it scrolls up as if it just re-rendered the page. It only does this when selecting the date in the prompt when it is generated from the icon. It does not if I click on the text input control.

Expected Behavior

The behavior should be the same regardless of whether the icon in the control is clicked or if the text field control is picked.

Reproduction

SPFx

Steps to reproduce

Create SPFx Web part 1.19

Add Date Picker component

Click on the icon and select a date and the page will shift upward

Click on the text area and select a date and the change will occur but the page will remain in place.

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] The provided reproduction is a minimal reproducible example of the bug.

[eduardoEB-dev]

This is what happens when I select the date using the calendar icon.. notice the page scrolls up.

[eduardoEB-dev]

When I select the text area, not the calendar icon the page does not move at all.