[YearPicker] Scroll to the current year even with autoFocus=false

[alexfauquette]

Fix #4601

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	491.1	1,016.5	561.4	735.28	189.119
Sort 100k rows	ms	613.9	1,210.7	1,210.7	942.48	201.779
Select 100k rows	ms	219.3	308.6	300.5	279.42	33.206
Deselect 100k rows	ms	135.2	373.8	252.4	241.26	84.824

Generated by 🚫 dangerJS against 86e7798

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[flaviendelangle]

Is there a way to achieve the same behavior without adding a new div ?

And what do you think about hiding the content of the div before the scroll is completed ?
Because in it's current shape, we have an ugly flickering.

[alexfauquette]

It was a bit more complicated, but yes I managed to do the same by customizing the existing div

I do not see the flickering. (light mode the PR deploy, dark mode the current doc)

year.scroll.mp4

[flaviendelangle]

I do not see the flickering. (light mode the PR deploy, dark mode the current doc)

Use openTo="year" to see it
It's when we go to the year view on mount. I think the problem is that it does not have the ref on the 1st render.

[alexfauquette]

For the blink, it's not a problem with the ref that is responsible. The autofocus has the same behavior

Screencast.from.13.09.22.11.55.06.mp4

You would like to add a

---

About avoiding to add a new div, I realized I ended up using display: contents which is breaking the accessibility.

We have the following structure:

<CalendarRoot> // a display flex column
	<CalendarHeader /> // fix height
	<TransitionGroup> // extends as much as possible (height: 100%)
		<div>
			<RenderedView/>

The problem is that with height: 100% the div height matches it's content, not its parent. And so I cannot put the overflow to this element.

I can not put the ref on the TransitionGroup (exact name is CalendarPickerViewTransitionContainer) because if reduceAnimations=true it simply render its children

The current solution I implemented is to manage the scroll in the YearPicker because it's the only component with a scroll bar.

[flaviendelangle]

For the blink, it's not a problem with the ref that is responsible. The autofocus has the same behavior

OK, it's not very sexy, but if the autoFocus has it I guess we can release it like that

The current solution I implemented is to manage the scroll in the YearPicker because it's the only component with a scroll bar.

Makes sense to me

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.