Problems with inputs and textareas inside of draggable component

I investigate some problems when placing <input> and <textarea> elements inside of draggable component,

1. cmd+A or Ctrl+A shortcuts doesn’t work for input or textarea (but selecting text with Shift + Arrows still works)
2. Attempt to select input or textarea content with touchpad/mouse starts dragging parent element

My draggable component looks like,

[megawebmaster]

@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 😉

[trevorsmith]

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;
}