When the Date or Time Selectors in the DatePicker/TimePicker/DateTimePicker components are scrolled in Safari, an unexpected flickering appears over the elements which value is updated with the scrolling.
Here is a video demonstrating the issue:
The reported issue is tested and replicating on iOS 14.2 Safari and iOS 14.5 Safari.
The elements in the DatePicker/TimePicker/DateTimePicker popup should not flicker when they are scrolled
The popup is Not appended to the div provided
The popup is appended to the div provided
When the Date Inputs or DropDowns are positioned at the bottom of a page, their popup continues to open below the input field. This causes the popup to appear beyond the browser's boundaries, making the users unable to use the popup.
The position of the popups of the Date inputs and DropDowns should be automatically changed based on the available space below each of the components. If there is not enough space to open the popup below the component's input, the popup should appear above the input.
When clicking on the arrows of the Calendar inside the DatePicker's popup, the blur and focus events are not thrown the same way in Chrome and Safari
The focus and blur events should be triggered the same in both Chrome and Safari browsers.
Here are videos from the behavior of the above example when started in:
DatePicker closes when we click the empty space below its cells
go to https://www.telerik.com/kendo-vue-ui/components/dateinputs/datepicker/
in the opened datepicker click on header to switch to year view
click on the empty space below the cells
the popup closes
the popup does not close
When the DatePicker popup calendar is opened on a device with iOS 14.1, once the navigation arrow is clicked, the pop immediately closes
Tapping on the navigation arrow should change the current calendar view and remain the popup opened.