Stop propagation of click events on draggable node once activation constraints are met

[clauderic]

Fixes #172

This PR adds a click event listener to the draggable node to stop propagation of click events once activation constraints are met.

If activation constraints are not met, click events fire as they should.

[changeset-bot]

🦋 Changeset detected

Latest commit: d7d6a4d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@dnd-kit/core	Minor
@dnd-kit/modifiers	Major
@dnd-kit/sortable	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Size Change: +456 B (+1%)

Total Size: 61.4 kB

Filename	Size	Change
packages/core/dist/core.cjs.development.js	16.2 kB	+199 B (+1%)
packages/core/dist/core.cjs.production.min.js	10.2 kB	+67 B (+1%)
packages/core/dist/core.esm.js	16 kB	+190 B (+1%)

ℹ️ View Unchanged

Filename	Size
packages/accessibility/dist/accessibility.cjs.development.js	640 B
packages/accessibility/dist/accessibility.cjs.production.min.js	486 B
packages/accessibility/dist/accessibility.esm.js	503 B
packages/accessibility/dist/index.js	148 B
packages/core/dist/index.js	141 B
packages/modifiers/dist/index.js	144 B
packages/modifiers/dist/modifiers.cjs.development.js	837 B
packages/modifiers/dist/modifiers.cjs.production.min.js	613 B
packages/modifiers/dist/modifiers.esm.js	760 B
packages/sortable/dist/index.js	144 B
packages/sortable/dist/sortable.cjs.development.js	3.9 kB
packages/sortable/dist/sortable.cjs.production.min.js	2.55 kB
packages/sortable/dist/sortable.esm.js	3.78 kB
packages/utilities/dist/index.js	144 B
packages/utilities/dist/utilities.cjs.development.js	1.64 kB
packages/utilities/dist/utilities.cjs.production.min.js	989 B
packages/utilities/dist/utilities.esm.js	1.54 kB

_{compressed-size-action}

[andys8]

Hi @clauderic, I'm working on application where cards can be sorted. These cards contain checkboxes and buttons. With this change (since 4.0.0) this will swallow these all click events and these buttons don't work anymore.

Is there a way to these buttons can still work?

Update

Found #476 (comment)

The solution/fix seems to be to leverage change the default configuration of sensors with useSensor an passing an activationConstraint with a distance.

useSensor(PointerSensor, { activationConstraint: { distance: 5 } })

This works for me. But I'm thinking if there are others struggling with this issue. Then a migration guide in 4.0.0 with example could be helpful. Or one could think about having the behavior where buttons work, as default, but user's have the option to change the configuration to disable them.

[HelKyle]

Hi @andys8, to avoid the conflicts between click and drag events, you can implement a custom MouseSensor like this.

import type { MouseEvent, KeyboardEvent } from 'react'
import {
  MouseSensor as LibMouseSensor,
  KeyboardSensor as LibKeyboardSensor
} from '@dnd-kit/core'

export class MouseSensor extends LibMouseSensor {
  static activators = [
    {
      eventName: 'onMouseDown' as const,
      handler: ({ nativeEvent: event }: MouseEvent) => {
        return shouldHandleEvent(event.target as HTMLElement)
      }
    }
  ]
}

function shouldHandleEvent(element: HTMLElement | null) {
  let cur = element

  while (cur) {
    if (cur.dataset && cur.dataset.noDnd) {
      return false
    }
    cur = cur.parentElement
  }

  return true
}

add data-no-dnd attribute to the elements

<input data-no-dnd="true" />

[RemyMachado]

@HelKyle
It works like a charm, thanks!

I prefer this implementation that doesn't relay on activation constraints.
This code snippet deserves a place in the official documentation. The library is great, but the lack of examples is a bummer.