[StaticDatePicker] The year view on StaticDatePicker does not auto scroll to current year

[joespeargresham]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When opening the year view of a Standalone Date Picker, the currently selected year is not revealed. I have to scroll down to see the currently selected year. This is inconsistent with the Date Picker component where when opening the year view, the current year is automatically scrolled to.

Date Picker:

Standalone Date Picker:

Expected behavior 🤔

The currently selected year should be revealed in the StandaloneDatePicker.

Steps to reproduce 🕹

Steps:

1. Open the StandaloneDatePicker demo from the docs: https://codesandbox.io/s/staticdatepickerdemo-material-demo-forked-805v23?file=/package.json
2. Observe that the current year is not automatically revealed/scrolled into view
3. Compare to the DatePicker demo from the docs where when switching to the year view, the current year is revealed: https://codesandbox.io/s/basicdatepicker-material-demo-forked-kt9zjh?file=/demo.tsx

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

   System:
    OS: Windows 10 10.0.17134
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 17.07 GB / 31.86 GB
  Binaries:
    Node: 14.19.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.16 - C:\Program Files\nodejs\npm.CMD
  Managers:
    Maven: 3.6.0 - C:\Program Files\Apache\maven\bin\mvn.CMD
    pip3: 20.1.1 - ~\AppData\Local\Programs\Python\Python38-32\Scripts\pip3.EXE
  Utilities:
    Git: 2.32.0.
  Virtualization:
    Docker: 19.03.8 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE
  IDEs:
    VSCode: 1.66.1 - C:\Users\jspear\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
  Languages:
    Bash: 4.4.19 - C:\Windows\system32\bash.EXE
    Java: 17.0.2
    Python: 3.8.5
  Browsers:
    Chrome: 100.0.4896.127
    Edge: Spartan (42.17134.2208.0)
    Internet Explorer: 11.0.17134.1

Order ID 💳 (optional)

#27566

[flaviendelangle]

The pickers inside a panel are automatically focusing the current year when mounting the year view, not the static panels.
This make sense because we don't want a static panel to always steal the focus.

If in your app, this focus is not problematic, you can just add the autoFocus prop to your StaticDatePicker to override the default behavior.
See: https://codesandbox.io/s/staticdatepickerdemo-material-demo-forked-qihmjo?file=/demo.tsx:0-797

But I think we should not rely on the focus to scroll to the current view and scroll even when the autoFocus is not enabled.

[flaviendelangle]

Adding this in YearPicker works.
But the API is not well supported in Safari.
@alexfauquette maybe MUI has a better way of doing this that I am missing

  useEnhancedEffect(() => {
    const currentYearDOMNode = ownRef.current!.querySelector<HTMLButtonElement>(`button[data-current-year="1"]`)
    if (!currentYearDOMNode) {
      return
    }

    currentYearDOMNode.scrollIntoView({ block: 'center' })
  }, [currentYear])

[alexfauquette]

Why do you think we should not rely on the focus to manage the scroll?

I had a look at how <MenuList /> I do not see any scroll management. Only imperative focusing.

I'm not sure making components visually work without the correct focus state is a good practice for accessibility.

For me setting autofocus is the best solution. Notice that without it the keyboard accessibility is broken. Press Tab to put the focus on the current year, the keyboard navigation does not work, whereas it works with autofocus

[flaviendelangle]

When you use StaticDatePicker opened on year by default, do you think we should auto focus the current year ?
It could be in a form where users want to autofocus another field.

MenuList is in a popper so for me the use case is not the same, you can't really have an opened popper without caring about it, so auto focusing make sense.
But in the static variant of the pickers, I don't think we can force the auto focus.
And if we keep the auto focus optional as it is today, then I feel like we could scroll the year view to the current year even when not auto-focused.

[alexfauquette]

I never met an interface with year picker opened by default but yes it should work in this configuration.

So the proposed code solves this issue and we have a new one:

If I don't set autoFocus on <StaticDatePicker /> the focus does not change when opening year view, because the autoFocus for the <YearPicker/> is determined by its parent

About the support of scroll API, you have a workaround in Core using scrollTop property:

https://github.com/mui/material-ui/blob/bc76d39f8aa1e983dc422d4deb6db38b9c549c47/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js#L358-L376

[flaviendelangle]

Indeed

[flaviendelangle]

The use case is very specific, it's when you have a static date picker opened by default to the year view

https://codesandbox.io/s/date-and-time-pickers-forked-yqmdxr?file=/src/App.tsx

If it is opened by default to the day view, we could autofocus without any big problem.

[rwieruch]

I never met an interface with year picker opened by default but yes it should work in this configuration.

Our UI only allows to set a month, e.g. to allow a time range from January to March (1st quarter of the year).

[trypton]

Unfortunately it doesn't work when maxDate is set

[alexfauquette]

@trypton Could you open a new issue to describe it?

[bdamor5]

@trypton Hey , did you find a solution for it? i have added a maxDate to 2008 Jan 31 but it isn't focused/highlighted on it and it also does not auto scroll to it.

[agyarmati]

I have the same issue @bdamor5 , if I use maxDate the date picker starts at 1900.