bug(Datepicker): class 'mat-calendar-body-active' on day in another month is wrong

[jones1008]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When selecting a date in the datepicker (e.g. 1st of october), this day of month of every other month (e.g. 1st of september or 1st of november) has a button element with the class mat-calendar-body-active which is probably wrong, because it is not active. As far I can see, this bug does not have any visual clues that it's happening but the class is still applied on wrong places.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-94uee3?file=src%2Fmain.ts Steps to reproduce:

1. choose any date within the datepicker (e.g. 1st of october)
2. navigate to any other month (e.g. november)
3. notice that the same day (e.g. 1st of november) this month (or any other month) has the class mat-calendar-body-active on the button element.

Expected Behavior

Only the button of the selected day should have the class mat-calendar-body-active.

Actual Behavior

When some day is selected in the datepicker (e.g. 1st of october), in every other month this day of month (e.g. 1st of november) has the class mat-calendar-body-active too, which is probably wrong, since it is not 'active'.

Environment

• Angular: 18.2.8
• CDK/Material: 18.2.8
• Browser(s): every browser
• Operating System (e.g. Windows, macOS, Ubuntu): every OS

[crisbeto]

mat-calendar-body-active indicates where the keyboard focus is, not that a date is selected. It only has a visual effect when navigating with the keyboard. The selected date gets the class so that when the user tabs away and comes back, their focus will pick up from where they were.