Fix KDateRange confusing selection states and end date reset after selecting start date via keyboard

[LianaHarris360]

Description

This pull request addresses the KDateRange bug in which, after initially setting a Start Date in the textbox using the keyboard, selecting another date on the calendar results in the Start Date being reset.

This pull request also clears the End Date after selecting a Start Date, but only if the Start Date is after the End Date.
This feature is not replicated when using mouse clicks to select dates on the calendar view, as it would make it difficult to remove or restart the date range values.

Issue addressed

Addresses #817

Before/after screenshots

After:
Setting a start date in the text box, then clicking to select the end date on the calendar:

TextboxThenCalendar.mov

Selecting a start date that is before and after the end date:

StartDateRenew.mov

Changelog

• Description: Updates KDateRange logic so that end date is cleared only if start date is after end date; users can now set start date via keyboard, then select end date using the calendar view.
• Products impact: none
• Addresses: KDateRange: Confusing selection states; end date resets after selecting start date via keyboard #817
• Components: -
• Breaking: no
• Impacts a11y: -
• Guidance: -

Steps to test

1. Open the KDateRange component and select a Start Date in the textbox using the keyboard.
2. Select a End Date on the calendar view using the mouse. The End Date should be updated as expected.
3. Select a Start and End date on the calendar, then input a new Start Date in the textbox with a date that is before the End Date.
4. The Start Date should be updated, while the End Date remains unchanged.
5. Input a new Start Date in the textbox with a date that is after the End Date.
6. The Start Date should be updated, and the End Date should be reset.

(optional) Implementation notes

At a high level, how did you implement this?

The logic within setStartDate() was updated so that if the start date is after the end date, the end date is null, otherwise, it is unchanged.

Within KDateCalendar.vue, a watcher has been added for the props selectedStartDate and selectedEndDate, which will update the local dateRange object values, so that the calendar dates are consistent with the updates made to the dates in the KDateRange textboxes. isFirstChoice has been converted into a computed property and its value is updated based on changes to the dateRange object values.

Testing checklist

• Contributor has fully tested the PR manually
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

[nucleogenesis]

I have tested locally and the code changes look good to me. Things work as expected and described.

However, I think that the UX is a bit wonky in this particular case:

You cannot edit your end-date selection: Select 10/1/24 for start date, then click 10/31/24 for the end date. Oops, you meant to cilck 11/1/24! When you click 11/1/24, you have now selected 11/1/24 as the start date and basically lose your selection.

Or, similarly, say you select 10/1/24 - 11/1/24 but you really meant to only select all of October! If you click within the selection to change the end date to 10/31/24 it's instead set to your start date.

---

I'm not sure if that's the expected behavior but it feels odd that every time I select a date after having two dates selected that I'm starting my selection over again rather than being able to tweak it a bit.

To be clear, though, the keyboard usage works on both of the text box inputs perfectly in my testing, so this seems to address the issue it's targeting altogether.

[LianaHarris360]

I believe it is the expected behavior because if two dates are already set and then a new date (within the selection) is chosen, how do we decide if that new date is meant to be the start or end date? However, being able to directly edit the start and end date via the text box without resetting the date range selection is somewhat of a middle-ground solution.

[nucleogenesis]

@LianaHarris360 sorry for the delay in reply here!

I'm interested in @radinamatic and/or @pcenov 's thoughts here.

Particularly I'm stuck on not being able to extend/edit my selection I guess - it feels like I should be able to click 1 day past my end date and extend it but, in any case, things look and feel solid to me.

[radinamatic]

Apologies for late reply @LianaHarris360 !

We have reviewed the PR and the proposed solution does fix the original issue without any regressions regarding the keyboard navigation 👏🏽.

Couple of comments for future iterations and improvements:

• @pcenov mentioned that we might consider thinking about adding a default pre-filled date range (would need decisions regarding what would be the most common beneficial range)
• while I concur with comment by @nucleogenesis that the ability to extend the range would be handy, implementing it to be keyboard-navigable would require additional handlers for dragging, and that is not an easy undertaking with a complex component like this.

[radinamatic]

LGTM, thank you @LianaHarris360 ! 💯