fix(alert): crash when return null as child on cta property (#2630)

WTTJ · Nov 26, 2024 · 34f76f1 · 34f76f1
1 parent dc5e8d0
commit 34f76f1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git 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
@@ -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()
+  })
 })