Fix issues with Reference field validation

frontend/components/ReferenceSelectHeader/ReferenceSelectHeader.jsx

@@ -29,12 +29,6 @@ export default class ReferenceSelectHeader extends Component {
      */
     instructionText: proptypes.string,
 
-    /**
-    * A callback to be used to obtain the base URL for the given page, as
-    * determined by the view.
-    */
-    onBuildBaseUrl: proptypes.func,
-
     /**
      * The name of a reference field currently being edited.
      */
@@ -44,6 +38,11 @@ export default class ReferenceSelectHeader extends Component {
      * The CTA text to display on the "return to document" button.
      */
     returnCtaText: proptypes.string,
+
+    /**
+     * The URL of the "return to document" CTA button.
+     */
+    returnCtaUrl: proptypes.string,
   }
 
   static defaultProps = {
@@ -56,10 +55,10 @@ export default class ReferenceSelectHeader extends Component {
       children,
       collectionParent,
       instructionText,
-      onBuildBaseUrl,
       parentDocumentId,
       referencedField,
-      returnCtaText
+      returnCtaText,
+      returnCtaUrl
     } = this.props
     // Render nothing if we don't have the collection schema available.
     if (!collectionParent) return null
@@ -70,15 +69,6 @@ export default class ReferenceSelectHeader extends Component {
     if (!fieldSchema) return null
 
     const displayName = fieldSchema.label || referencedField
-    const section = fieldSchema.publish &&
-      fieldSchema.publish.section &&
-      Format.slugify(fieldSchema.publish.section)
-    const returnUrl = onBuildBaseUrl({
-      createNew: false,//!Boolean(state.router.parameters.documentId),
-      referencedField: null,
-      search: null,
-      section
-    })
 
     return (
       <div class={styles.container}>
@@ -89,7 +79,7 @@ export default class ReferenceSelectHeader extends Component {
 
         <Button
           accent="destruct"
-          href={returnUrl}
+          href={returnCtaUrl}
           size="small"
         >{returnCtaText}</Button>
 

frontend/containers/DocumentField/DocumentField.jsx

@@ -57,6 +57,22 @@ class DocumentField extends Component {
     this.validator = new Validator()
   }
 
+  componentDidMount() {
+    const {state} = this.props
+    const {app, document} = state
+    const hasError = document.validationErrors
+      && document.validationErrors[this.name]
+
+    // If we have just mounted the component and there's already an error
+    // registered for it in the store, we should validate the field again
+    // to ensure it isn't an error that carried on from a previous life of
+    // the component (e.g. when the component is mounted/unmounted) as part
+    // of the flow for selecting a reference document.
+    if (hasError) {
+      this.validate(this.value)
+    }
+  }
+
   componentDidUpdate(oldProps, oldState) {
     const {state} = this.props
     const {document} = state

frontend/views/ReferenceSelectView/ReferenceSelectView.jsx

@@ -27,6 +27,24 @@ import Page from 'components/Page/Page'
 import ReferenceSelectHeader from 'components/ReferenceSelectHeader/ReferenceSelectHeader'
 
 class ReferenceSelectView extends Component {
+  getRedirectUrl() {
+    const {
+      onBuildBaseUrl,
+      referencedField,
+      state
+    } = this.props
+    const {currentCollection: collection} = state.api
+    const referenceFieldSchema = collection.fields[referencedField]
+
+    return onBuildBaseUrl.call(this, {
+      createNew: !Boolean(state.router.parameters.documentId),
+      search: null,
+      section: referenceFieldSchema &&
+        referenceFieldSchema.publish &&
+        Format.slugify(referenceFieldSchema.publish.section)
+    })
+  }
+
   handleDocumentDelete(ids) {
     const {actions, state} = this.props
     const {
@@ -75,16 +93,7 @@ class ReferenceSelectView extends Component {
       update
     })
 
-    let referenceFieldSchema = collection.fields[referencedField]
-    let redirectUrl = onBuildBaseUrl.call(this, {
-      createNew: !Boolean(state.router.parameters.documentId),
-      search: null,
-      section: referenceFieldSchema &&
-        referenceFieldSchema.publish &&
-        Format.slugify(referenceFieldSchema.publish.section)
-    })
-
-    route(redirectUrl)
+    route(this.getRedirectUrl())
   }
 
   handleEmptyDocumentList() {
@@ -234,6 +243,7 @@ class ReferenceSelectView extends Component {
           instructionText={instructionText}
           referencedField={referencedField}
           returnCtaText={returnCtaText}
+          returnCtaUrl={this.getRedirectUrl()}
         />
 
         <DocumentListController