microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.48k stars 2.73k forks source link

[Bug]: Date Picker #33154

Open eduardoEB-dev opened 1 day ago

eduardoEB-dev commented 1 day ago

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

eduardoEB-dev commented 1 day ago

Image

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

eduardoEB-dev commented 1 day ago

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