diff --git a/app/components/component-formbuilder/src/components/ComponentProperties.js b/app/components/component-formbuilder/src/components/ComponentProperties.js
index b584d81eb71f93f50274aacf451274336904564e..23b8a382c30d4f6943d48db7f265ea64072b00dc 100644
--- a/app/components/component-formbuilder/src/components/ComponentProperties.js
+++ b/app/components/component-formbuilder/src/components/ComponentProperties.js
@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { map, omitBy } from 'lodash'
-import { ValidatedFieldFormik, Menu, Button } from '@pubsweet/ui'
+import { isEmpty, map, omitBy } from 'lodash'
 import { Formik } from 'formik'
+
+import { ValidatedFieldFormik, Menu, Button } from '@pubsweet/ui'
+
 import FormProperties from './FormProperties'
 import components from './config/Elements'
 import * as elements from './builderComponents'
@@ -50,9 +52,14 @@ const ComponentProperties = ({
               component={elements[value.component].default}
               key={`${selectedComponent}-${key}`}
               name={key}
-              onChange={val =>
+              onChange={val => {
+                if (isEmpty(val)) {
+                  setFieldValue(key, null)
+                  return
+                }
+
                 setFieldValue(key, val.target ? val.target.value : val)
-              }
+              }}
               {...value.props}
             />
           </Section>
diff --git a/app/components/component-formbuilder/src/components/builderComponents/Menu.js b/app/components/component-formbuilder/src/components/builderComponents/Menu.js
index 4106846b3aec379206cea052d255628704ee7c2d..fb1425bc2c8b8800152d98aad163a42d2d238179 100644
--- a/app/components/component-formbuilder/src/components/builderComponents/Menu.js
+++ b/app/components/component-formbuilder/src/components/builderComponents/Menu.js
@@ -24,6 +24,7 @@ const ValidationMenu = input => (
           </Section>
         )
       }
+
       return null
     })}
   </>