[Input Date Picker] Buggy experience in range when start date populated

[macandcheese]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Currently, when the start portion of a range is populated, there are some strange behaviors as a user interacting with the component:

Screen.Recording.2024-01-04.at.11.33.15.AM.mov

1 - The month in the shown calendar will change to the "current month" when the start value of a range is set and a user hovers over the start dropdown.
2 - A user selecting a date from the start range while the end is not populated, will set the end, not override the start

Expected Behavior

I would not expect the month in the start dropdown to change to the current month while hovering.
I would also expect the user interaction with the start date to override the start date, not set the end date - this ux needs to be supported to allow a user to change their start date before selecting an end date.

Note - When used with proximity-selection-disabled the hover-over-start-month-changing-to-current does NOT occur, but the behavior to change the start date without setting an end date is not supported still.

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/vYPLrMV?editors=1000

Reproduction Steps

1. Open Codepen
2. Notice the start date is populated
3. Interact with the start date field to open the dropdown
4. Begin to hover over the date grid, and notice the switch to the current month, not the populated date.
5. Select a date.
6. Notice the selection populates the end date - and does not override the already populated start date

Reproduction Version

2.1

Relevant Info

No response

Regression?

No response

Priority impact

p1 - need for current milestone

Impact

A few aspects here - the "hover to current month" is IMO a serious bug - the "populates end date and not override start date" is also an unexpected UX.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)

[dhagens]

This is a showstopper for our team using the picker with the range property. Mostly our end date is set to null and we only want to modify the start date. We are unable to achieve this workflow using the range property. We ended up going with two separate date pickers to achieve this.

[geospatialem]

Spike to determine if the enhancements of #8402 fulfill the above, and if not to determine next steps and priority for inclusion in October or beyond.

[geospatialem]

Spike to determine if the enhancements of #8402 fulfill the above, and if not to determine next steps and priority for inclusion in October or beyond.

Verified with the input-date-picker UI/UX improvements in #8402 with https://codepen.io/geospatialem/pen/JoPvWEK in 3.0.0-next.96 🎉