Month and year select dropdown improvements

[rodgobbi]

@gpbl
When working on #2614, I tested different use cases and noticed some behaviors that I think can be improved based on what an end-user would expect.
I'll list below what I found and write ideas on how it could be improved, IMO.
We can then discuss more ideas, and if it makes sense to change any of the things mentioned below, I'll open PRs to implement the changes.

1 - If there's a dropdown only for the month (captionLayout="dropdown-months"), the startMonth and endMonth are set to default values.
This behavior makes sense when the day picker has the select dropdown for the year, but causes an unexpected limitation when there's only the select dropdown for the month, especially for the endMonth default value which is the end of the current year.
IMO, it makes sense to allow the users to navigate to any year by default using the calendar arrows.
This means the day picker doesn't set any default value to startMonth and endMonth, and only uses the values explicitly passed as prop, setting the limit for the calendar month navigation based only on the props with a value.

2 - When there are multiple months in the calendar, clicking on a select dropdown around the calendar always changes the first calendar month.
Screen recording to visualize the behavior.
For me, it makes more sense to update the calendar month being changed with the dropdown and update the rest of the displayed months based on the change.
E.g.: if the user changes the third displayed month from July to November, the third displayed month changes to November (instead of the first displayed month like the current behavior, and the rest of the displayed months update based on this state change.

3 - When there are multiple months in the calendar, selecting a month near the endMonth hides the remaining displayed months if those months are after endMonth, causing the number of displayed months to not match the numberOfMonths prop value.
Screen recording to visualize the behavior.
This edge case can happen when selecting a month with the select dropdowns, but also with other use cases like when pagedNavigation is equal to true.
Does it make sense to handle this edge case in a different way?
The day picker could try to prevent the final number of displayed months from being smaller than the numberOfMonths prop value.

[gpbl]

@rodgobbi, thanks for the thorough review of the dropdown! I understand its limitations when displaying multiple months...

The dropdown was not intended for use when displaying multiple months. In my opinion, multiple dropdowns do not provide a good user experience. If developers require a dropdown to change the calendar view, they should create their own control instead, external to DayPicker.

• We could limit the dropdown to only when numberOfMonths={1}, but that appears to be an excessive breaking change.
• We could discourage the use of this layout for multiple months in the docs.

In conclusion, I believe it’s not worth fixing the bugs with the dropdown menu and multiple months.

Related to the dropdown-months:

If there's a dropdown only for the month (captionLayout="dropdown-months"), the startMonth and endMonth are set to default values. This behavior makes sense when the day picker has the select dropdown for the year, but causes an unexpected limitation when there's only the select dropdown for the month, especially for the endMonth default value which is the end of the current year.

These are valid points. I believe it would be a good enhancement to remove the startMonth/endMonth restriction when using captionLayout=“dropdown-months”. Feel free to open a PR if you have something already in mind! Thanks.

[rodgobbi]

Feel free to open a PR if you have something already in mind! Thanks.

Awesome and you're welcome 👍 I'll work on it.

In conclusion, I believe it’s not worth fixing the bugs with the dropdown menu and multiple months.

Makes sense. And to handle all the edge cases I mentioned it would require a lot of complexity to be added, so if it's not worth it better not to add this complexity.
Another approach that crossed my mind that I should share after I read your feedback:
What if the day picker only showed the select dropdowns for the first calendar month?
I don't know if this is still considered a breaking change.

Just a reminder, the item 3 I mentioned can still happen without dropdowns. For example, using pagedNavigation with endMonth can cause the day picker to show fewer months than the numberOfMonths value.

[gpbl]

What if the day picker only showed the select dropdowns for the first calendar month? I don't know if this is still considered a breaking change.

It still sounds to me a flawed user experience...

Just a reminder, the item 3 I mentioned can still happen without dropdowns. For example, using pagedNavigation with endMonth can cause the day picker to show fewer months than the numberOfMonths value.

Isn’t that expected? For instance, if the number of navigable months is odd and the number of months is even, there will always be a single extra month displayed as the last month while using pagedNavigation.

By the way, good catch!

[rodgobbi]

Both points make sense, thanks for the time to explain it!