bug(drag-drop): changing the disable state dynamically doesn't work

[doronsever]

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

[Achilles1515]

Heh, interesting. The event listener callback order is changed between Ivy and View Engine, which is causing your problem.

Forked StackBlitz

I added a console log during your onMouseDown method and also subscribed to the beforeStarted subject (emits during mousedown on the cdkDrag element) with another console log.

Check the console log.

View Engine:

1. onMouseDown
2. beforeStarted (so your code is running first)

Ivy (go to the tsconfig.app file and change "enableIvy": false to true):

1. beforeStarted
2. onMouseDown (drag-drop logic is running first)

As far as a new solution and without knowing other info about your app/draggable+resizable element, I don't have anything for you at the moment.

Can you use a drag handle? Can the resize element mousedown event handler call stopPropogation or something like?

[Achilles1515]

@crisbeto The beforeStarted subject currently emits nothing:

beforeStarted: Subject<void>

What are your thoughts on changing this subject to emit the triggering event to provide a little more context about the drag operation to its subscribers? This could be of use for scenarios like this issue.

beforeStarted: Subject<MouseEvent | TouchEvent>

i.e.

/** Handler for the `mousedown`/`touchstart` events. */
  private _pointerDown = (event: MouseEvent | TouchEvent) => {
    //this.beforeStarted.next();
    this.beforeStarted.next(event);
    //...
  }

[doronsever]

@Achilles1515 thanks for your reply! I was managed to bypass the issue by putting the cdkDrag directive inside an inner component, passing the boolean flag into that component and then using the cdkDragRootElement directive to point back on the parent element I actually want it to be draggable.

I like your idea that the beforeStarted subject will return all events. What could also be helpful is to specify a selector that cdkDrag won't work when clicking on that selector.

something like <draggable-item cdkDrag cdkSkipDragging=".selector"></draggable-item>

[DanWahlin]

I have a similar situation with a Quill rich text editor where your idea of having a cdkSkipDragging would work well. Right now the focus on the Quill editor (I assume it's due to mousedown being intercepted but am still looking into it) is being blocked when the CDK drag functionality is enabled so having the ability to skip specific DOM nodes based on a selector would be really nice.

[keyone2693]

@DanWahlin did you solve the issue? I have the same issue

[DanWahlin]

@keyone2693 I never found a great workaround so I ended up adding a drag/drop toggle button so that people using the tool could enable drag/drop when needed or disable it to avoid issues with things like text editors.

[Asiabi]

wate for me im chaking farist

On Fri, 7 May 2021, 04:21 Dan Wahlin, @.***> wrote:

@keyone2693 https://github.com/keyone2693 I never found a great workaround so I ended up adding a drag/drop toggle button so that people using the tool could enable drag/drop when needed or disable it to avoid issues with things like text editors.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/angular/components/issues/19065#issuecomment-833833421, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS255R23X5E52Y2WTJ36J6DTML24VANCNFSM4MG354CQ .

[keyone2693]

@DanWahlin Ya I did the same thing

[dertuerke]

PUSH

[riethmue]

Push