Custom Card Component doesn't not acknowledge onCardClick events

[djakaitis]

Describe the bug We have created a custom card component that is being passed into the <Board /> like so:

  return (
    <Board
      data={data}
      laneDraggable={false}
      cardDraggable={!disabled}
      onCardClick={handleCardClick}
      hideCardDeleteIcon={true}
      handleDragStart={() => setIsDragging(true)}
      handleDragEnd={handleDragEnd}
      components={{
        ScrollableLane,
        LaneHeader: () => null, //lane header defined inside Section
        Card: ApplicationCard,
        Section: PipelineColumn,
      }}
      style={{
        padding: "0",
        backgroundColor: "transparent",
        height: "100%",
      }}
    />
  );

We expected to be able to handle the card click event even though we are using a custom component.

When we remove the custom component (use the fallback Card from the library) - the click event registers properly.

[mnyp]

Hi @djakaitis, I had the exact same issue as you however managed to get the onClick working on a custom card component.

Here is an example of my code below:

Custom card component

const CustomCard = ({
  onClick,
  title,
  description,
  image,
  reporter,
  contributors,
  onDelete,
}) => {
  return <div className={classes.root} onClick={onClick}></div>;
};

You need to make sure you pass onClick into the Custom card component, then in your Board component make sure you add the onCardClick (which it looks like you already have done):

Board component

<AsyncBoard
  data={newData}
  draggable
  editable
  canAddLanes
  editLaneTitle
  components={components}
  onCardClick={handleCardClick}
/>

Finally on my handleCardClick event I have as follows:

handleCardClick event

const handleCardClick = (cardId, metadata, laneId) => {
  console.log("cardid", cardId);
  console.log("metadata", metadata);
  console.log("laneid", laneId);
};

It should return to you the cardId, metadata and laneId. I hope this is helpful 😄 ✌️