bug(drag-drop): changing the disable state dynamically doesn't work
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### Reproduction
For some reason, in Stackblitz it works: https://stackblitz.com/edit/angular-ghqzcr
But in a new project, the bug also reproduces: https://github.com/doronsever/drag-drop-bug
I copied everything from stackblitz to my project and still doesn't work.
I need the initiate state of the drag and drop to be disabled and only when clicking on the mouse down to enable it.
The reason for that is that I have also a resize option and if the drag and drop is enabled, when resizing it is also dragging the element.
So in my real app, I'm starting with the drag and drop disabled, and on a mousedown event, I check if the mouse is not touching the resize button and only then enabling the drag and drop.
Up until Angular 8, everything worked fine but now that we are trying to upgrade to Angular 9 (and also material to 9, this behavior stopped working).
#### Expected Behavior
When setting the flag to false, enable the dragging even if the mouse is down.
#### Actual Behavior
drag and drop doesn't work
#### Environment
- Angular: 9.1.1
- CDK/Material: 9.2.0
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Mac
Contributor guide
Research direction
Start by comparing the StackBlitz reproduction with the linked new-project reproduction, focusing on the Angular CDK drag-and-drop setup and the dynamic disabled flag. Reproduce the Angular 9.1.1/Material 9.2.0 behavior in Chrome, then verify that dragging can be enabled during mousedown while resizing does not start a drag.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100