[pickers][DateRangeCalendar] Using a controlled DateRangeCalendar with currentMonthCalendarPosition breaks scroll behaviour

[GMchris]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/muddy-cherry-x8jh2g

Steps:

1. Render at DateRangeCalendar with the currentMonthCalendarPosition with a value other than 1
2. Feed a value to the component so that there's a "current" calendar. (ex a couple of days in August 2024)
3. Change the value so that the next month becomes "current" (ex a couple of days in September 2024)

Current behavior

The "current" calendar never changes, lingering on the previously active calendar (August in my example). Manually scrolling to the next month reveals the value is correctly interpreted, however not scrolled to. This is only true for sibling months (when calendars={2})

Expected behavior

The component should scroll to the "next" month so that my selection is always visible.

Context

In our application we have a preference to show the current month on the right, so we used currentMonthCalendarPosition to achieve this. We also have a number of shortcuts such as (last month, last week, this month etc) which users use to quickly make selections.

I strongly suspect the reason the current behaviour is how it is, because currentMonthCalendarPosition isn't considered when scrolling. If currentMonthCalendarPosition was 1, the current behavior would make complete sense, since you'd only scroll if the "previous" month suddently became selected, not the "next" one.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.0/bin/npm
    pnpm: 7.5.2 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 128.0.6613.113 < Using this for development
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.16.4 
    @mui/material: ^5.15.20 => 5.16.4 
    @mui/private-theming:  5.16.6 
    @mui/styled-engine:  5.16.6 
    @mui/system:  5.16.7 
    @mui/types:  7.2.15 
    @mui/utils:  5.16.6 
    @mui/x-charts:  7.14.0 
    @mui/x-charts-vendor:  7.14.0 
    @mui/x-data-grid:  7.14.0 
    @mui/x-data-grid-premium: ^7.13.0 => 7.14.0 
    @mui/x-data-grid-pro: ^7.7.1 => 7.14.0 
    @mui/x-date-pickers:  7.7.1 
    @mui/x-date-pickers-pro: ^7.7.1 => 7.7.1 
    @mui/x-internals:  7.14.0 
    @mui/x-license:  7.7.1 
    @types/react: ^18.2.48 => 18.3.3 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: ^5.5.2 => 5.5.2 

Search keywords: currentMonthCalendarPosition, calendar picker

[michelengelen]

Hey @GMchris and thanks for opening this issue.
Also thanks for submitting a PR for this already.
I'll assign reviewers so that it will get picked up!

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @GMchris! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!