search

telerik / kendo-react

Issue tracker - KendoReact http://www.telerik.com/kendo-react-ui/
https://kendo-react-teal.vercel.app
Other
211 stars 39 forks source link

react-ui Calendar strange scroll behavior #574

Open gine opened 4 years ago

gine commented 4 years ago

I'm submitting a...

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/android@2.0.2
├── @capacitor/cli@1.5.1
├── @capacitor/core@2.0.2
├── @ionic/app-scripts@3.2.4
├── @ionic/react@5.1.0
├── @ionic/react-router@5.1.0
├── @progress/kendo-react-dateinputs@3.13.0
├── @progress/kendo-react-intl@3.13.0
├── @progress/kendo-theme-bootstrap@4.15.0
├── @types/node@12.12.38
├── @types/react@16.9.34
├── @types/react-dom@16.9.7
├── @types/react-router@5.1.7
├── @types/react-router-dom@5.1.5
├── ionicons@5.0.1
├── react@16.13.1
├── react-dom@16.13.1
├── react-redux@7.2.0
├── react-router@5.1.2
├── react-router-dom@5.1.2
├── react-scripts@3.4.0
└── typescript@3.7.4

Browser:

System:

kspeyanski commented 4 years ago

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 commented 3 years ago

We've added a specific task related to all KendoReact components usage inside a ShadowDOM here: https://github.com/telerik/kendo-react/issues/626