DatePicker Focus and scroll top problem

[fsachet]

Hello,
I open a new discussion because I can't foud an answer of my problem. I acutally used datePicker (office-ui-fabric-react version 7.204.0) in SPFX project.

When I open the calendar using the icon and I select a date, the scoll of the page go on top. If i checked the document.activeElement is the main role element. If I clicked on the combobox element of the DatePicker, I don't have this problem.

Has anyone had an idea of this problem ?

Thanks in advanced for your help.

[arasubala]

@fsachet - did you manage to resolve this? I have the same problem with DatePicker in SPFx solution.

[fsachet]

I currently don't have found a solution to resolve this problem. I updated to use the last version of the library but I have the same behavior.

I checked the code used by the click event on the icon and combobox element and I remarked that is not the same.

I suppose that an update should be applied to the library for resolved this problem but I didn't have time to investigate further.

[HiltonGiesenow]

I'm also seeing this in several places in the same solution. SPFx 1.18.2 with @fluentui/react 8.106.4 ...

[Macro21]

Through testing, I have discovered that the error only occurs when the user clicks on the calendar icon.
Therefore, I have found an alternative solution that has worked for me. This solution involves adding a 'pointer-events: none' CSS property to the date picker icon. This way, I have managed to solve the problem.

[fsachet]

Thanks a lot for your message and your alternative solution.
I also confirm that is resolving my problem if i add the css property

[Kennybestman]

Thank you very much for your knowledge share. I also attest that this resolved my issue when I added the css property as suggested

[alexbbell]

Thank you! There's an alternative way to add css. You can write them in the component styles.

<DatePicker
firstDayOfWeek={DayOfWeek.Monday} // Monday as the first day of the week
styles={{
root: {
fontFamily: 'inherit',
color: 'inherit',
width: '100%', // Force full width to prevent layout shifts
},
icon: {
pointerEvents: 'none'
},
statusMessage: {
fontWeight: 'normal'
} }} .... />