Skip to content

CDK: scrolling page while dragging item does not work #14273

Closed
@ghost

Description

Bug, feature request, or proposal:

Bug / Feature request

What is the expected behaviour?

When dragging an item with cdkDrag attribute, user should be able to use mouse wheel to scroll down the page, or the page should scroll down automatically if the draggable list longer than current page's height.

What is the current behaviour?

Mouse scroll on page is not working when dragging an item.

What are the steps to reproduce?

A) Goto https://material.angular.io/cdk/drag-drop/overview
Click on Draggable square in Basic Drag&Drop (Getting started section). While holding left mouse button pressed, try to scroll the page down with mouse wheel or touchpad.

B) Click on Draggable list item in Drag&Drop sorting (Reordering lists section). Make sure that half of the list is not visible in viewport. Click on any item and start dragging it to the bottom of the list. Again, mouse wheel scroll is not working, neither the page gets scrolled down automatically when you try to drag item down the list.

What is the use-case or motivation for changing an existing behaviour?

This is Accessibility related issue and should be working to get the best user experience.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 7.

Is there anything else we should know?

If you check React's draggable component here (https://react-beautiful-dnd.netlify.com/?selectedKind=single%20vertical%20list&selectedStory=basic&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) you should get a better understanding of the expected Accessibility feature. Drag the top item to the bottom of the list and see how the page scrolls down. Mouse wheel scroll is also working fine.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions