Skip to content

Over event isn't propagated if nested droppable doesn't accept draggable under a certain scenario #3032

@deejain

Description

@deejain

The steps below are applicable to the following jsFiddle, https://jsfiddle.net/deepankarj/60zz9zgb/.

Steps:

  1. Click on and drag Draggable 1 onto the inner droppable of Droppable 3. Continue to hold Draggable 1, do not release it.
  2. Note that when Draggable 1 is on the inner droppable and the pointer is fully over the area of Droppable 3, the outer Droppable 3 is highlighted, which is expected.
  3. Move Draggable 1 beyond the bounds of Droppable 3 and release it so that it's resting entirely in whitespace.
  4. Click and drag Draggable 2. You only have to drag it to some random whitespace spot, not on a droppable.
  5. Release Draggable 2.
  6. Grab Draggable 1 again and drag it onto the inner droppable of Draggable 3. Continue to hold Draggable 1, do not release it.
  7. When Draggable 1 is on the inner droppable and the pointer is fully over the area of Droppable 3, take a note of the state of the outer Droppable 3 container.

Expected results:

  • The outer Droppable 3 container is highlighted when Draggable 1 is entirely on the inner droppable and within the bounds of Droppable 3.

Actual results:

  • The outer Droppable 3 container is not highlighted when Draggable 1 is entirely on the inner droppable and within the bounds of Droppable 3.

Notes:

  • If you debug the issue, it turns out that simply dragging Draggable 2 results in some state changes in Droppable 3, such that event propagation no longer works as expected when Droppable 1 is on the inner droppable.
  • Console logs have been added to this jsFiddle to help highlight this issue.

Metadata

Metadata

Assignees

No one assigned

    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