Input inside of draggable element is break

[carlosvaldesweb]

If you try to write space, input is broke.

Reproduction:
https://codesandbox.io/p/sandbox/drag-ndrop-kit-forked-83wtw7?file=%2Fsrc%2FApp.tsx%3A1%2C10-1%2C24

[BradDuns]

This is the error I see in the console:

Warning: You provided a `value` prop to a form field without an `onChange` handler. 
This will render a read-only field. If the field should be mutable use `defaultValue`. 
Otherwise, set either `onChange` or `readOnly`.

If I modify to add a change handler to the reproduction it seems to work.
Do you have an onChange handler in your other code?

[miguel-martinr]

I'm having a similar issue. Text Inputs and textarea won't fire onChange when entering a white space. I can't move the text cursor either using the arrows or clicking.

My setup:

export const QueueItemList = ({ items }: QueueItemListProps) => {
  const handleDragEnd = () => {
    setQueueItems(
      queueItems.map((item, index) => ({ ...item, priority: index + 1 }))
    );
  };

  const [parentRef, queueItems, setQueueItems, updateConfig] = useDragAndDrop<
    HTMLDivElement,
    QueueItemCardProps
  >(items, {
    sortable: true,
    plugins: [animations()],
    onDragend: handleDragEnd,
  });

  return (
    <div ref={parentRef} className={styles.itemList}>
      {queueItems.map((queueItem, index) => {
        return (
          <li key={queueItem.title + index}>
            <QueueItemCard {...queueItem} />
          </li>
        );
      })}
    </div>
  );
};

Where QueueItemCard renders a text input and a textarea

[laakal]

I solved the problem by using react portal for interactive elements. But it is not maintainable.