React dnd-kit draggableコンポーネント内のボタンが動かない時の対処

Reactのdnd-kitを使ってドラッグ＆ドロップを実装した時の話。
draggable(正確にはuseSortable)にしたコンポーネント内の削除ボタンが10回に1回くらいしか動かなかった。

原因

原因を調べたところ、ボタンを押した際のマウスの動きが「ドラッグ」と判定され、
削除ボタンの押下と判定されていなかった模様。

下記記事にDragOverlayを使った時に同様の事象が見られた報告があり、
おそらく原因としては一緒かなと。

対処法

Sensorsを利用する。

Sensorsを利用すると、dragする際の細かな挙動を制御することが可能。
今回はこれを利用して、「掴んだ瞬間ではなく、掴んでから10px動かしたらドラッグと判定」という状態を実現する。

DndContextと同じコンポーネントに下記のように記述する。

import {
  DndContext,
  MouseSensor,
  useSensor,
  useSensors,
} from '@dnd-kit/core';

function App() {
  const mouseSensor = useSensor(MouseSensor, {
    // Require the mouse to move by 10 pixels before activating
    activationConstraint: {
      distance: 10,
    },
  });
  
  const sensors = useSensors(
    mouseSensor,
  );
  
  return (
    <DndContext sensors={sensors}>
      {/* ... */}
    </DndContext>
  )
}

これで削除ボタンが効くようになった。

上記ではMouseSensorのみ利用しているが、他にもKeyboardSensorやTouchSensorなどもあります。