HTML DragAndDrop issues on all browsers but FireFox

Question

I'm trying to implement html Drag and Drop, which i have done in the past on the same project and its working. But when i create it for a new section im doing, my current method only works on firefox. All other browsers instantly call onDragEnd after onDragStart. This is the element:

const Card: FunctionComponent<CardsProps> = ({
  isDraggingTag,
  draggingTagId,
  isDraggingCard,

  onOpen,
  onDrag,
  onDrop,
  onDragEnd
}) => {
  // State
  const ref = useRef<HTMLElement>();

  // region handlers

  const handleOnOpen = (): void => {
    onOpen && onOpen(props.id);
  };

  const handleOnDrag = (event: DragEvent<HTMLElement>): void => {
    console.log("start");
    onDrag && onDrag(props.id);
  };

  const handleOnDragEnd = (): void => {
    console.log("end");
    onDragEnd && onDragEnd();
  };

  const handleOnDrop = (): void => {
    console.log("drop");
    onDrop && onDrop(props.id);
  };

  // endregion

  // region render

  return (
    <Paper
      ref={selectableRef}
      draggable
      onClick={handleOnOpen}
      onDragStart={handleOnDrag}
      onDragEnd={handleOnDragEnd}
      onDrop={handleOnDrop}
    >
        ...
    </Paper>
  );

  // endregion render
};

export default withStyles(styles)(createSelectable(memo(Card)));

When handleOnDrag is called on anything but firefox, with onDrag prop defined and fired results in an instant onDragEnd. onDrag is this method on a Redux view container

handleCardDrag = (cardId: string): void => {
    const { display, selection, eventsActionSetDragAndDrop } = this.props;

    if (
      !display?.cards ||
      !eventsActionSetDragAndDrop
    ) {
      return;
    }

    const card = display.cards.get(cardId);

    if (!card) {
      return;
    }

    // Redux action call
    eventsActionSetDragAndDrop({
      sourceType: selection?.selectedStream
        ? MyDataCardTypes.Record
        : MyDataCardTypes.Stream,
      sourceId: cardId
    });
  };

I am not sure why this would cause drag and drop to instantly end. I have tried the use of preventDefault and stopPropagation but just results in onDragEnd never being fired.

HTML DragAndDrop issues on all browsers but FireFox

0 Answers0