search

telerik / kendo-angular

Issue tracker - Kendo UI for Angular
http://www.telerik.com/kendo-angular-ui/
Other
463 stars 213 forks source link

[RangeSlider] Range slider ticks not working properly #3262

Closed yanmariomenev closed 2 years ago

yanmariomenev commented 3 years ago

Describe the bug Dragging the slider ticks fast can pass the other slider tick and bug out the UI. This behavior can be seen in the video provided below.

To Reproduce Steps to reproduce the behavior: Start sliding fast the first or second tick so they pass each other. Short video recording of the bug : https://screenrec.com/share/ne5Kt4G1lu Work on any demo of the RangeSlider component : https://www.telerik.com/kendo-angular-ui/components/inputs/rangeslider/

Workaround https://stackblitz.com/edit/rangeslider-tick-workaround?file=app/app.component.ts (doesn't work with the latest versions)

Screenshots https://imgur.com/a/Aw0WSOU

Browser

yanmariomenev commented 2 years ago

The issue seems to be present even if the user doesn't drag the tick fast. Example - https://stackblitz.com/edit/angular-uvoafb-kfvewf?file=app%2Fapp.component.ts Behavior - https://screencast-o-matic.com/watch/c3nXi9Vbc5Q Example with smallStep and largeStep - https://stackblitz.com/edit/angular-27fdaa?file=app/app.component.ts Behavior - https://screencast-o-matic.com/watch/c3nXiRVbc5Y

Raisolution commented 2 years ago

Fix available in v8.0.9 of the Inputs package.

yanmariomenev commented 2 years ago

Reopening the issue as there is still a bug present while dragging the slider tick fast. In some examples, it is hard to be reproduced but in the following one: https://www.telerik.com/kendo-angular-ui/components/inputs/rangeslider/ticks/#toc-titles If you focus the first slider tick and drag the second one while the mouse cursor is outside of the component will reproduce the bug. Returning the cursor to the component will update the UI. Screen recording: https://user-images.githubusercontent.com/49076727/163362509-8ea8e8ef-9dcf-45a5-82f2-4d8dd82c3005.mp4

PaskalevStoyan commented 2 years ago

The reason this behaviour still persists in the RangeSlider drag handles is because, when an HTML element is wrapped in an iframe, its events don't propagate outside the iframe, resulting in the observed discrepancy between the drag handles.

The demos in the Kendo Angular documentation and the StackBlitz examples are wrapped in an iframe, thus the reason why it can be seen on both places.

This is browser specific behaviour observed only in Chrome - for more information - please see this issue in the Chromium bug report website.