fix(SW-957 SW-958): Make selected EnterDetailsCards clickable

2024-11-21 14:48:18 +01:00
parent 8a9cfc5da4
commit ac0d671811
4 changed files with 23 additions and 1 deletions
--- a/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
+++ b/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
@@ -25,10 +25,22 @@ export default function Card({
  title,
  type,
  value,
+  handleSelectedOnClick,
 }: CardProps) {
  const { register } = useFormContext()
+
+  function onLabelClick(event: React.MouseEvent) {
+    // Preventing click event on label elements firing twice: https://github.com/facebook/react/issues/14295
+    event.preventDefault()
+    handleSelectedOnClick?.()
+  }
  return (
-    <label className={styles.label} data-declined={declined} tabIndex={0}>
+    <label
+      className={styles.label}
+      data-declined={declined}
+      tabIndex={0}
+      onClick={handleSelectedOnClick ? onLabelClick : undefined}
+    >
      <Caption className={styles.title} color="burgundy" type="label" uppercase>
        {title}
      </Caption>