clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
12.71k stars 632 forks source link

PointerSensor activationConstraint logs error on valid usage #1402

Open alexiz10 opened 4 months ago

alexiz10 commented 4 months ago

Currently, if I use the PointerSensor with activationConstraint, I am getting an error logged in the console for not using tolerance. But here is the issue. I am using my activationConstraint like this:

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

According to the types, this is valid:

interface DistanceConstraint {
  distance: DistanceMeasurement;
  tolerance?: DistanceMeasurement;
}
interface DelayConstraint {
  delay: number;
  tolerance: DistanceMeasurement;
}
export declare type PointerActivationConstraint = DelayConstraint | DistanceConstraint | (DelayConstraint & DistanceConstraint);

But when I run this and actually drag something, I get the following error:

TypeError: right-hand side of 'in' should be an object, got undefined
    hasExceededDistance hasExceededDistance.ts:14
    handleMove AbstractPointerSensor.ts:214
    add Listeners.ts:15
    attach AbstractPointerSensor.ts:110
    AbstractPointerSensor AbstractPointerSensor.ts:99
    PointerSensor PointerSensor.ts:27
    instantiateSensor DndContext.tsx:339
    bindActivatorToSensorInstantiator DndContext.tsx:479
    eventName useSyntheticListeners.ts:22
    React 23
    <anonymous> index.tsx:22
lockdown-install.js:1:97687

The issue seems to lie here: https://github.com/clauderic/dnd-kit/blob/master/packages/core/src/sensors/pointer/AbstractPointerSensor.ts#L201-L204

        if (
          activationConstraint.tolerance != null &&
          hasExceededDistance(delta, activationConstraint.tolerance)
        ) {

Although the code is using loose equality (!=), and null and undefined are technically equal (loosely), it still seems to run hasExceededDistance. Not really sure what the problem could be exactly.