Ensure to-be-cloned element is not null (#1554)

Author: Franco Correa

core/components/_helpers/action-group-creator.js

@@ -10,6 +10,7 @@ const getActionGroup = (actions = [], actionOverrides = {}) => {
       <ButtonGroup compressed>
         {actions.map((action, index) => {
           /* add key to each element of array */
+          if (!action) return null
           return React.cloneElement(action, { key: index, ...actionOverrides })
         })}
       </ButtonGroup>

core/components/_helpers/layout-margin-reset.js

@@ -4,9 +4,10 @@ import { css } from '@auth0/cosmos/styled'
 export const LAYOUT_CHILDREN_CLASS_NAME = 'cosmos-layout-child'
 
 export const applyLayoutChildClass = children =>
-  React.Children.map(children, child =>
-    React.cloneElement(child, { className: LAYOUT_CHILDREN_CLASS_NAME })
-  )
+  React.Children.map(children, child => {
+    if (!child) return null
+    return React.cloneElement(child, { className: LAYOUT_CHILDREN_CLASS_NAME })
+  })
 
 /**
  * Applies the margin reset depending on the prop value that comes

core/components/atoms/checkbox/checkbox.js

@@ -125,6 +125,7 @@ Checkbox.Element = styled.div`
 Checkbox.Group = props => (
   <Checkbox.Element {...props} {...Automation('checkbox.group')}>
     {React.Children.map(props.children, child => {
+      if (!child) return null
       return React.cloneElement(child, {
         name: props.name,
         defaultChecked: props.selected.indexOf(child.props.value) > -1,

core/components/atoms/radio/radio.js

@@ -15,13 +15,14 @@ const justifyContent = {
 
 const Radio = props => (
   <Radio.Element {...props} {...Automation('radio')}>
-    {React.Children.map(props.children, child =>
-      React.cloneElement(child, {
+    {React.Children.map(props.children, child => {
+      if (!child) return null
+      return React.cloneElement(child, {
         name: props.name,
         checked: props.selected === child.props.value,
         readOnly: props.readOnly || child.props.readOnly
       })
-    )}
+    })}
   </Radio.Element>
 )
 

core/components/atoms/tooltip/action.js

@@ -73,6 +73,7 @@ class ActionTooltip extends React.Component {
   processAction() {
     const { children: button, resetDelay } = this.props
     const content = this.preprocessContent()
+    if (!button) return null
 
     const newHandler = event => {
       this.resetState()

core/components/molecules/form/field/field.js

@@ -56,12 +56,13 @@ const ariaDescribedBy = (helperTextId, errorTextId) => {
 }
 
 const applyAriaToFieldChild = (children, inputId, helperTextId, errorTextId) =>
-  React.Children.map(children, child =>
-    React.cloneElement(child, {
+  React.Children.map(children, child => {
+    if (!child) return null
+    return React.cloneElement(child, {
       id: inputId,
       ...ariaDescribedBy(helperTextId, errorTextId)
     })
-  )
+  })
 
 const getIdFromChild = child => child.props.id
 

core/components/molecules/form/field/stories/field.story.js

@@ -299,3 +299,22 @@ storiesOf('Form', module).add('Form full width', () => (
     </RowLayout>
   </Example>
 ))
+
+storiesOf('Form', module).add('Form Fields with null children', () => (
+  <Example title="Form Fields with null children">
+    <RowLayout gutter="spacious">
+      <Form>
+        <Form.Field label="Something">
+          <TextInput
+            type="text"
+            placeholder="Enter something"
+            actions={[{ icon: 'copy', handler: () => {}, label: 'Copy to clipboard' }]}
+          />
+          {null}
+        </Form.Field>
+
+        <Form.Actions primaryAction={{ label: 'Save Changes', handler: () => {} }} />
+      </Form>
+    </RowLayout>
+  </Example>
+))