KDateRange: Confusing selection states; end date resets after selecting start date via keyboard

[LianaHarris360]

Product

Kolibri Design System

Expected behavior

When using the keyboard to select a start date, users should be able to:

• Select the Start Date via the keyboard in the textbox.
• Select the End Date on the calendar using the mouse.

The End Date should only clear if the new start date is after the current End Date. Otherwise, the End Date should remain unchanged.

Actual behavior

When using the cursor keys to update the start date in KDateRange, the End Date is set to a clear state. Additionally, confusing selection states appear when setting the initial date with the keyboard. A subsequent mouse click causes the Start Date to be reset, even if the user then navigates to the End Date input box.

Steps to reproduce the issue

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.
3. Notice how the Start Date gets updated instead of the End Date.
4. Select a Start and End date on the calendar, then select a new Start Date with a date that is before the End Date.
5. Notice that after the Start Date is updated, the End Date is cleared out.

Additional information

Screencast.from.11-06-2024.02_56_39.PM.webm