onDragEnd to set input focus issue

[ronnieli930]

I recently running into a issue, keen to learn the root cause of it from the community.

Here is a simple reproduce of my issue. Im using Nextjs, react, @dnd-kit/core, typescript.

Normally if I do testRef?.current?.focus(), the input field will have the cursor and if I directly type on keyboard, the value would change.

But in this case I cannot type, but the outline of the input field and the log indicate that the focus is triggered. ONLY THAT I CANNOT Type.

"use client";
import {
  DragEndEvent,
  useDndMonitor,
  useDraggable,
  useDroppable,
} from "@dnd-kit/core";
import React, { useRef } from "react";

function page() {
  const testRef = useRef(null);

  useDndMonitor({
    onDragEnd: (event: DragEndEvent) => {
      if (testRef.current) {
        console.log("focus");
        (testRef?.current as HTMLInputElement).focus();
      }
    },
  });

  const draggable = useDraggable({
    id: "drag",
  });

  const droppable = useDroppable({
    id: "drop",
  });
  return (
    <div>
      <div
        ref={draggable.setNodeRef}
        {...draggable.listeners}
        {...draggable.attributes}
        className="h-10 w-10 border border-yellow-200"
      >
        drag
      </div>
      <div
        ref={droppable.setNodeRef}
        className="h-10 w-10 border border-green-200"
      >
        drop
      </div>

      <form onSubmit={() => console.log("submit")}>
        <input ref={testRef} defaultValue={"default "} />
        <input type="submit" />
      </form>
    </div>
  );
}

export default page;

I think it is the useDndMonitor makes it weird behind the scene because if it is a button on click listener, it would set the focus just fine.

But the very first of all, I want to know that why the text field is focused but not really (cannot type). Is the focus lost else where after the drag end?

Expect from answers:

• How to make it work (after drop, it set the focus correctly, so that user can type directly). Updated: Here is the temporary workaround. On line 19 there seems to be a specific value for the setTimeOut, which is 50, value less than 50 still doesn't work.

• The root cause of this issue. (Why 50ms specifically?). It would be very nice of you if could explain through source code.

Links:

• Original post on StackOverflow

[lcswillems]

I've exactly the same issue. Did you find any proper solution?

[ronnieli930]

A workaround is setTimeout(() => testRef.current.focus(), 50) which I tested back then and worked. But knowing why is the part I haven't figure out yet. My pure guess is that onDragEnd has other callbacks to execute. So if immediately set focused, it will be interrupted by other callbacks. And magically, the "other functions" need 50 as the magic number. I'm sure if dig deeper the library can have more information. Looking forward from your output!

[lcswillems]

Thank you very much for sharing!! Will investigate on my side and hopefully find more explanations

[lcswillems]

I've just found this issue: #1037 (comment)

That seems to point out to the precise code