IgxCalendar and IgxDatePicker UX experience on desktop and mobile

[hanastasov]

Some examples of UI experience on desktop and mobile devices that I expected to behave differently. Just for the sake of discussing if this is the right way or another would be better.

Updating the calendar while editing the input

1. Open https://infragistics.com/angular-demos/scheduling/datepicker-sample-1
2. Open the calendar to select a date
3. Update the input value and press Enter

Expectations: The calendar to respect the value in the input

Result Calendar view did not change accordingly

Clearing the input value using the Delete key on the mobile Chrome keyboard for IgxDatePicker and IgxTimePicker

1. Open https://www.infragistics.com/angular-demos/data-entries/reactive-forms on mobile
2. Select a date in the Date input
3. After selecting the date, the value in the input is selected.
4. Press Delete

Expectations: value to be cleared

Result: Cursor was moved to first position

Writing in the date picker input

1. Focus the IgxDatePicker input on Mobile in order to write in the input

Expectation: A mobile keyboard to be brought to the user

Result The default keyboard is brought to the user.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[radomirchev]

@sdimchevski could you take a look at he feature request

[AnjiManova]

@radomirchev & @hanastasov, we reviewed the feature request, and we could share the following:

1. Updating the calendar while editing the input

• Updating the calendar view now is happening by closing and reopening it. We could improve this by adding an additional trigger by a keyboard (Enter) press.

2. Clearing the input value using the Delete key on the mobile Chrome keyboard for IgxDatePicker and IgxTimePicker

• The expectations are covered - after selecting a date from the calendar view, the date is loaded in the input, and we can delete it from the delete keyboard button or from the clear icon within the input.

• There are three other “glitches”/bugs here in this case:

1. Calendar view position on mobiles (iPhone device used)

2. If we want to enter the date after entering the month manually, the cursor is back at the beginning, which we need to fix as a behaviour. As you can see, the deletion is working from the keyboard and the clear icon. https://github.com/IgniteUI/igniteui-angular/assets/127843837/32f3e4ec-5b9b-46f0-a7e1-f5e31d54bb76

3. Additional trigger action for calendar icon within the Date Picker (this is not a bug, could be considered as an improvement)

3. Writing in the date picker input

• If I understand correctly, the numeric keyboard should be displayed on mobiles, not the default one, and we agree that this is the expected behaviour.

Summary: We could consider the following:

• Adding pressing enter within the input as a trigger for reloading the calendar view dropdown
• Fixing the bring at the beginning cursor when we are typing
• Calendar view dropdown display position
• Bringing a numeric keyboard on mobile, not the default one

[radomirchev]

@hanastasov the issue have to be updated with UX clarifications and scheduled for development.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.