[Firefox specific] onClick handler on cards is triggered when drag&drop --

[sylvain-hamel]

Describe the bug When you drag and drop a card, the card's onClick handler should not be called but on Firefox it is.

To Reproduce Steps to reproduce the behavior:

1. Create a board
2. Use a custom card template
3. In you card template, handle onClick ( const Card = <div onClick={()=>console.log('click')}/>)
4. Add a card to your board
5. On Chrome or Edge: drag the card to another column. The onClick handler IS NOT called and this is correct.
6. Try the same on Firefox (drag the card to another column). The onClick IS CALLED. But this is not a click, this is a drag&drop gesture.

Expected behavior The onClick handler should not be called

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox
• Version 65

[pedropazello]

Its happening with me too using version 2.0.9 On Safari is working normally

• OS: MacOS Mojave 10.14.3
• Browser Firefox
• Version 66.0.1

[josepichu]

This also happen in inet11.

• OS: Windows 10
• Browser Internet Explorer
• Version 11

[rhryhorenko]

Hey! Any updates about the issue? Or it is are not going to be resolved?

[rhryhorenko]

I've solved the issue in the Firefox browser by adding draggable={cardDraggable} to the header inside custom card. Where cardDraggable is a prop. Also you will need to add onDragStart={e => e.preventDefault()} to header. This is needed to avoid this issue - https://github.com/rcdexta/react-trello/issues/348

[garimahans15]

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 @Proxi01 , Can you please help me on 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