From 3c7bd5cd285fab50fa616c5ad2fa097d1bf53c02 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Wed, 19 Apr 2023 18:30:58 +0200
Subject: [PATCH] bugfix: fix pointer propagation of links behind the before
 element

---
 front/src/components/table/ClickableCell.tsx |  1 +
 front/src/pages/people/People.tsx            | 28 +++++++++-----------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/front/src/components/table/ClickableCell.tsx b/front/src/components/table/ClickableCell.tsx
index 515006308..e30bd8a06 100644
--- a/front/src/components/table/ClickableCell.tsx
+++ b/front/src/components/table/ClickableCell.tsx
@@ -24,6 +24,7 @@ const StyledClickable = styled.div`
     border: 1px solid ${(props) => props.theme.text20};
     box-sizing: border-box;
     border-radius: 4px;
+    pointer-events: none;
     display: none;
   }
 
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index 2d1ab5048..5b6e793c4 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -125,10 +125,8 @@ const columns = [
   columnHelper.accessor('email', {
     header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
     cell: (props) => (
-      <ClickableCell href="#">
-        <a href={`mailto:${props.row.original.email}`}>
-          {props.row.original.email}
-        </a>
+      <ClickableCell href={`mailto:${props.row.original.email}`}>
+        {props.row.original.email}
       </ClickableCell>
     ),
   }),
@@ -146,18 +144,16 @@ const columns = [
   columnHelper.accessor('phone', {
     header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
     cell: (props) => (
-      <ClickableCell href="#">
-        <a
-          href={parsePhoneNumber(
-            props.row.original.phone,
-            props.row.original.countryCode as CountryCode,
-          )?.getURI()}
-        >
-          {parsePhoneNumber(
-            props.row.original.phone,
-            props.row.original.countryCode as CountryCode,
-          )?.formatInternational() || props.row.original.phone}
-        </a>
+      <ClickableCell
+        href={parsePhoneNumber(
+          props.row.original.phone,
+          props.row.original.countryCode as CountryCode,
+        )?.getURI()}
+      >
+        {parsePhoneNumber(
+          props.row.original.phone,
+          props.row.original.countryCode as CountryCode,
+        )?.formatInternational() || props.row.original.phone}
       </ClickableCell>
     ),
   }),