Cannot focus inputs inside of draggable items

Hey @clauderic, love the project and the API. Great work.

We have an application where we are rendering layers in a sortable list that can each open a popup with some inputs. While integrating dnd-kit, I ran into an issue where I couldn’t focus any inputs in a portaled popup. I also noticed that I can still drag the popup due to the pointer events being bubbled through the synthetic tree.

We’ve dealt with similar issues in our app, and have solved it by checking if event.currentTarget.contains(event.target) before calling preventDefault and doing our behavior.

I was wondering if you’ve got a good way to solve this?

Here’s a Codesandbox with an example.

Edit. Just wanted to clarify that I am setting activationContraint: { distance: 5 } to enable click behavior.

[ranbena]

I’m having a similar issue. My draggable items have an <input> inside, which won’t be allowed to focus on user click. @clauderic it could be great if you could add a config to disable this line (perhaps as a DndContext prop?).

In the meantime, I did this dirty hack in my code:

// make my own PointerSensor
class PointerSensorWithoutPreventDefault extends PointerSensor {
  static activators = [
    {
      eventName: "onPointerDown" as const,
      handler: ({ nativeEvent }: React.PointerEvent) => {
        if (!nativeEvent.isPrimary || nativeEvent.button !== 0) {
          return false;
        }

        // HACK: comment out prevention 🙀
        // nativeEvent.preventDefault();

        return true;
      },
    },
  ];
}

const sensors = useSensors(
  useSensor(PointerSensorWithoutPreventDefault), // 🎯
);

return (
  <DndContext sensors={sensors}>
    ...
  </DndContext>
);

[horprogs]

onActivate fixed the issue when you are trying to focus, but if you are trying to select text in the input, draggable items are moving. You could try to select text in the input here (focusing works fine).