react-dnd: Problems with inputs and textareas inside of draggable component

@rahul1995 - I just found out a solution: just store a ref to the draggable DOM node and when user focuses input/textarea set draggable attribute to false:

const Test = () => {
  const ref = useRef(null);
  const [focused, setFocused] = useState(false);
  const [_, drag] = useDrag({ item: { type: 'test' } });

  useEffect(() => {
    if (ref.current) {
      ref.current.setAttribute('draggable', !focused);
    }
  }, [focused]);

  return drag(
    <textarea ref={ref} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}></textarea>
  );
};

This should do the trick for Firefox 😉

Elements with contentEditable set inside a draggable parent container wouldn’t allow me to select text or interact with them in any way. After some digging, I found this bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=170139

It appears Chrome has since fixed the issue. Safari’s behavior can be fixed in the meantime with CSS:

.contenteditable-element {
  user-select: text;
}

@trevorsmith This is still not fixing the Firefox’s behaviour. Do you know any workaround for Firefox?