react-ui Calendar strange scroll behavior

[gine]

I'm submitting a...

• Bug report

Current behavior

I'm new on kendo and i would like to buy some react component. I need a calendar on my ionic application. I'm using @ionic/react so i'm testing kendo-ui-react.

On calendar the scroll or slide event is totally crazy and move fast to another year(1900.. 2024). Sometimes happens with a click on a date too.

Expected behavior

Scroll well like on the demo page

Minimal reproduction of the problem with instructions

I have created a stackblitz here:

https://stackblitz.com/edit/react-n17mv5?file=app%2Fmain.jsx

At beginning here all work well. To reproduce the bug the i have ever on my workspace, you must work a bit with code..

For example add a space then retry to test the scroll on calendar. This is the behavior that ever i have on my chrome(android/linux/windows) and firefox.

On stackblitz if you copy and paste on another browser page everythings start restart to work, but on my project never work.

Can be some bug at compile time? Can i found a work around to have a classic calendar with arrow and remove the scroll event? Can't find nothing on documentation.

Environment

Package versions:

├── @capacitor/[email protected]
├── @capacitor/[email protected]
├── @capacitor/[email protected]
├── @ionic/[email protected]
├── @ionic/[email protected]
├── @ionic/[email protected]
├── @progress/[email protected]
├── @progress/[email protected]
├── @progress/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Browser:

• Chrome (desktop) version 81.0.4044.122 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit)
• Chrome (Android) version (bundled with cordova?)
• Firefox version 75.0 (64bit)

System:

• TypeScript version: 3.7.4
• Node version: v10.19.0
• Platform: Linux, Windows

[kspeyanski]

Hello @gine ,

I was able to reproduce the described issue, and track down the problem to the shadow-dom usage of the Ionic framework. However, we would need more time to further investigate why the scrolls does not work properly inside a shadow-dom.

In the meantime, i can suggest the usage of the <MultiViewCalendar /> component from the @progress/kendo-react-dateinputs package:
https://www.telerik.com/kendo-react-ui/components/dateinputs/multiviewcalendar/

Why the default views count is 2, it can always be changed to showcase only a single view through the views property to look like a normal calendar, but without scroll:
https://www.telerik.com/kendo-react-ui/components/dateinputs/multiviewcalendar/multiple-views/

[kspeyanski]

We've added a specific task related to all KendoReact components usage inside a ShadowDOM here:
#626