From 34f76f120913390319b698b7f0c7599a61629b6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Mesnil?=
 <50322149+theo-mesnil@users.noreply.github.com>
Date: Tue, 26 Nov 2024 13:04:12 +0100
Subject: [PATCH] fix(alert): crash when return null as child on cta property
 (#2630)

---
 packages/Alert/src/index.tsx        | 20 +++++++++++---------
 packages/Alert/tests/index.test.tsx | 19 +++++++++++++++++++
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/packages/Alert/src/index.tsx b/packages/Alert/src/index.tsx
index d3dc3622b..c069459a8 100644
--- a/packages/Alert/src/index.tsx
+++ b/packages/Alert/src/index.tsx
@@ -55,16 +55,18 @@ const AlertComponent = forwardRef<'div', AlertProps>(
 
     // Handle clone actions recursively in case of multiple buttons
     const cloneActions = (child: React.ReactElement<AlertProps>): CloneActionsReturns => {
-      if (child.type === AlertButton) return cloneElement(child, { size })
-      if (child.type === AlertSecondaryButton) return cloneElement(child, { size })
+      if (child) {
+        if (child.type === AlertButton) return cloneElement(child, { size })
+        if (child.type === AlertSecondaryButton) return cloneElement(child, { size })
 
-      if (child.props?.children) {
-        return cloneElement(child, {
-          ...child.props,
-          children: Children.map(child.props.children, (nestedChild: React.ReactElement) =>
-            cloneActions(nestedChild)
-          ),
-        })
+        if (child.props?.children) {
+          return cloneElement(child, {
+            ...child.props,
+            children: Children.map(child.props.children, (nestedChild: React.ReactElement) =>
+              cloneActions(nestedChild)
+            ),
+          })
+        }
       }
 
       return child
diff --git a/packages/Alert/tests/index.test.tsx b/packages/Alert/tests/index.test.tsx
index 188c63f59..88b15850d 100644
--- a/packages/Alert/tests/index.test.tsx
+++ b/packages/Alert/tests/index.test.tsx
@@ -50,4 +50,23 @@ describe('<Alert>', () => {
     expect(container).toHaveTextContent(content)
     expect(container.getElementsByTagName('svg')[0]).toHaveAttribute('alt', 'Check')
   })
+
+  it('should render correctly with CTA', () => {
+    const { getByTestId, queryByTestId } = render(
+      <Alert
+        cta={
+          <>
+            {false && <Alert.Button dataTestId="button" />}
+            <Alert.SecondaryButton dataTestId="secondary-button" />
+          </>
+        }
+      >
+        <Alert.Title dataTestId="alert-title">title</Alert.Title>
+        {content}
+      </Alert>
+    )
+
+    expect(queryByTestId('button')).not.toBeInTheDocument()
+    expect(getByTestId('secondary-button')).toBeInTheDocument()
+  })
 })