fix: #4401 monthsShown with MonthYearPicker or QuarterYearPicker

[yuki0410-dev]

Description

Linked issue: close #4401

Problem
See issue #4401

Changes

• In the loop process that creates the Month component, modified to add the year instead of the month if it is a MonthYearPicker or QuarterYearPicker.
• Modified to take year into account in determining XX--keyboard-selected class.

Screenshots

To reviewers

Contribution checklist

• I have followed the contributing guidelines.
• I have added sufficient test coverage for my changes.
• I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

[pullrequest]

✅ This pull request was sent to the PullRequest network.

---

@yuki0410-dev you can click here to see the review status or cancel the code review job.

[pullrequest]

PullRequest Breakdown

Reviewable lines of change

+ 112
- 9

78% JavaScript (tests)
22% JavaScript

Type of change

Fix - These changes are likely to be fixing a bug or issue.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.94%. Comparing base (8ef2eef) to head (f1c23ac).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4603   +/-   ##
=======================================
  Coverage   96.94%   96.94%           
=======================================
  Files          28       28           
  Lines        2582     2586    +4     
  Branches     1081     1088    +7     
=======================================
+ Hits         2503     2507    +4     
  Misses         79       79           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[pullrequest]

These changes look good for resolving this issue. Given that it is performing some changes to the calendar behavior, I'd feel more confident in these changes if they had a solid set of unit tests with them.

One example would be—considering this was a bug, then there should be a unit test verifying that this works as expected now. This would protect against a regression if this code changes in the future. This particular test might look like: "it does not display the same year in both calendars for the month range selector".

On top of that, I'd recommend adding tests for the new behavior here too and thinking through any possible edge cases. For example, verifying that the year on the left-hand side is always less than the year on the right-hand side.

Ryan

---

Reviewed with ❤️ by PullRequest

[pullrequest]

A straightforward change, looks good with no issues.

Jacques

---

Reviewed with ❤️ by PullRequest

[yuki0410-dev]

Tests were added.