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:

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

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