[EuiCard] title Prop Causing onClick to Trigger Twice When Clicked

[breehall]

The title prop on EuiCard is causing the onClick method to trigger twice when the title is clicked. It appears that this only happens when a React Node is passed into title instead of a string.

Steps to Reproduce:

1. View the CodeSandbox link below and make sure the console is open
2. Click on the title text ('This is a title') and notice two console.log statements for each time the title is clicked
3. Click on the card body (not the title text) and notice that there's only one console.log statement for each time the body is clicked

CodeSandbox Link: https://codesandbox.io/s/card-onclick-demo-jue9fj?file=/demo.tsx

11C30291-17E8-4539-AE92-CFEBD89B6E09_2_0_a.mov

[cee-chen]

Here's the source code that prevents the double onClick trigger:

eui/src/components/card/card.tsx

Lines 195 to 199 in d25437c

	const outerOnClick = (e: React.MouseEvent<HTMLDivElement>) => {
	if (link && link !== e.target) {
	link.click();
	}
	};

Here's what's happening: because of the nested <span> being passed the title prop, the e.target in the above code is now the span, which is no longer equal to the link.

What we need to do: we need to add another conditional check to the if statement to ensure the link does not contain e.target.

We should also add a unit test for this behavior to confirm that onClick was not called twice after the fix.

[Jittojoyes98]

Hey i would like to fix this issue