Dragging the header in desktop Firefox freezes the card

[shaneosullivan]

Describe the bug When dragging a card by its header in Firefox v72.0.2 , the card freezes after moving a few pixels. Leaving go of the mouse button causes the card to move properly again.

To Reproduce Steps to reproduce the behavior:

1. Go to https://rcdexta.com/react-trello/?selectedKind=Basic%20Functions&selectedStory=Full%20Board%20example&full=0&addons=0&stories=1&panelRight=0
2. Click on the header of any card, holding down the mouse button
3. Drag the card out of the column
4. See that the card freezes.
5. Note that if you do the same action while clicking in the body of the card, it drags correctly

Expected behavior The card should not freeze in place, it should follow the mouse.

Screenshots See the attached zip file containing a video of it in action react-trello-header-firefox-dragging-bug.mov.zip

Desktop (please complete the following information):

• OS: MacOS Sierra
• Browser Firefox
• Version v72.0.2

Additional context None

[harshagoel24]

Did you get any solution for this issue? Even I am facing the same problem.

[shaneosullivan]

Not yet - I'll hopefully get time to debug it in depth in the coming weeks, and if I fix it I'll send a pull request

[fedden]

👍 experiencing this too! Would be awesome if anyone knows how to debug this

[rhryhorenko]

@fedden fixed by adding onDragStart={e => e.preventDefault()} to the header tag inside custom card component. So, my card now looks like :

const CustomCard = ({
  onClick,
  cardDraggable,
  ...otherProps
}) => {
  return (
    <MovableCardWrapper
      onClick={onClick}
    >
      <header
        draggable={cardDraggable}
        onDragStart={e => e.preventDefault()}
      >
... other code.

And it works for me.

[garimahans15]

Hi , I am also facing this issue in Mozilla firefox on-card drag and not just by dragging the card header. But this is replicable even on card drag not just on the header. Need one suggestion on how to pass draggable={cardDraggable}, I am using a separate custom Component to render the card, something like this

let customCard = (data, cardDraggable) => {
      return ( <CustomCard data={data}></CustomCard>)}

and then accessing the cardDraggable inside CustomCard Component something like

<header draggable={this.props.cardDraggable} onDragStart={e => e.preventDefault()}></header>

I feel I am not doing it right. Can anyone help to correct this?

[garimahans15]

Hi, My issue got resolved by just adding onDragStart={e => e.preventDefault()} to the parent tag of custom card. Thanks for the help

Regards!!! Garima