feat(ui5-daterange-picker): keyboard handling improvement #2179
Conversation
The button should receive a correct focus outline when the 'tab' key is pressed.
…into daterangepicker-kh
Depending on the caret symbol position, the corresponding date gets incremented or decremented with one unit of measure by using the following keyboard combinations: [PAGEDOWN] - Decrements the corresponding day of the month by one [SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one [SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one [PAGEUP] - Increments the corresponding day of the month by one [SHIFT] + [PAGEUP] - Increments the corresponding month by one [SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one
There was a problem hiding this comment.
Thanks for the change.
I did not get the commit message body description, saying "The button should receive a correct focus outline when the 'tab' key is pressed." Could you be more specific, which button do you mean?
Also there are few comments you can find inline.
…into daterangepicker-kh
which iterates a JS Date object is improved.
…into daterangepicker-kh
…into daterangepicker-kh
…into daterangepicker-kh
- lint errors are fixed
There was a problem hiding this comment.
Is the following expected: on PAGE_UP the startDate is changing, but on PAGE_DOWN both the start and end dates are changing.
In the video I start with PAGE_UP, that changes the start date and then I start pressing PAGE_DOWN that changes both
Screen Recording 2020-09-24 at 8.04.23 AM.zip
|
Is the following expected: on PAGE_UP the startDate is changing, but on PAGE_DOWN both the start and end dates are changing. The behavior is broken after merging the conflicts and It has to be fixed. |
- The inner input value is now generated from formating local dates into a string. - Keyboard handling helper function now compares UTC dates.
|
The issue is now fixed. |
…into daterangepicker-kh
…into daterangepicker-kh
Changing the component input value via keyboard interactions is now comfirmed by pressing enter keyboard key or focusing out of the input.
Tests are added, in order to cover the swapping of start and end date of the range in the component input field, when start date is after the end date.
…into daterangepicker-kh
|
According to the UX experts the behavior on Page Up and Page Down keyboard keys should change the value in the input field, but all validations have to be confirmed by pressing Enter keyboard key or by focusing out of the input field. |
unazko
changed the title
…into daterangepicker-kh
…into daterangepicker-kh
…into daterangepicker-kh
are converted to UTC dates by in order to ingore the time part of the dates.
|
@ilhan007 Good on my side. |
There was a problem hiding this comment.
Should not the component fire the "change" event, when the user changes the value with the newly added keyboard combinations, such as PAGEDOWN (applies for the rest as well).
Currently, in the DatePicker, DateRangePicker and DateTimePicker, the "change" event is not fired, when the value in the input is changed via these combinations and I was wondering if this is the way it should be. Even if you focus out the component after you change the date with PAGEDOWN for example, you won't get the "change" event.
Can you look into that?
|
The DatePicker, DateRangePicker and DateTimePicker do not fire the "change" event on focus out, after you change the date with PAGEDOWN/UP. This will be handled in a separate issue. |
Depending on the caret symbol position, the corresponding date gets incremented or decremented with one unit of measure by using the following keyboard combinations: [PAGEDOWN] - Decrements the corresponding day of the month by one [SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one [SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one [PAGEUP] - Increments the corresponding day of the month by one [SHIFT] + [PAGEUP] - Increments the corresponding month by one [SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one Fixes #1534
| @@ -3,6 +3,7 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; | |||
| import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; | |||
| import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js"; | |||
| import DateRangePickerTemplate from "./generated/templates/DateRangePickerTemplate.lit.js"; | |||
| import RenderScheduler from "../../base/src/RenderScheduler.js"; | |||
There was a problem hiding this comment.
This breaks several builds, please use the "@ui5/webcomponents-base/dist/RenderScheduler.js" form
There was a problem hiding this comment.
I will for the future. Thanks.
Depending on the caret symbol position, the corresponding date gets incremented or decremented with one unit of measure by using the following keyboard combinations: [PAGEDOWN] - Decrements the corresponding day of the month by one [SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one [SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one [PAGEUP] - Increments the corresponding day of the month by one [SHIFT] + [PAGEUP] - Increments the corresponding month by one [SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one Fixes #1534
Depending on the caret symbol position, the corresponding date gets incremented
or decremented with one unit of measure by using the following keyboard
combinations:
[PAGEDOWN] - Decrements the corresponding day of the month by one
[SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one
[SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one
[PAGEUP] - Increments the corresponding day of the month by one
[SHIFT] + [PAGEUP] - Increments the corresponding month by one
[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one
Related to: #1534