FIX Reload element form when element version changes

client/src/components/ElementEditor/Content.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { elementType } from 'types/elementType';
 import { inject } from 'lib/Injector';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
@@ -10,7 +11,7 @@ import getFormState from 'lib/getFormState';
 class Content extends PureComponent {
   render() {
     const {
-      id,
+      element,
       fileUrl,
       fileTitle,
       content,
@@ -40,7 +41,7 @@ class Content extends PureComponent {
           <InlineEditFormComponent
             extraClass={{ 'element-editor-editform--collapsed': !previewExpanded }}
             onClick={(event) => event.stopPropagation()}
-            elementId={id}
+            element={element}
             activeTab={activeTab}
             onFormInit={onFormInit}
             handleLoadingError={handleLoadingError}
@@ -60,7 +61,7 @@ class Content extends PureComponent {
 }
 
 Content.propTypes = {
-  id: PropTypes.string,
+  element: elementType,
   content: PropTypes.string,
   fileUrl: PropTypes.string,
   fileTitle: PropTypes.string,

client/src/components/ElementEditor/Element.js

@@ -273,7 +273,7 @@ class Element extends Component {
       {
         !childRenderingError &&
         <ContentComponent
-          id={element.id}
+          element={element}
           fileUrl={element.blockSchema.fileURL}
           fileTitle={element.blockSchema.fileTitle}
           content={this.getSummary(element, type)}

client/src/components/ElementEditor/InlineEditForm.js

@@ -2,6 +2,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { elementType } from 'types/elementType';
 import FormBuilderLoader from 'containers/FormBuilderLoader/FormBuilderLoader';
 import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue';
 import i18n from 'i18n';
@@ -42,17 +43,20 @@ class InlineEditForm extends PureComponent {
   }
 
   render() {
-    const { elementId, extraClass, onClick, onFormInit, formHasState } = this.props;
+    const { element, extraClass, onClick, onFormInit, formHasState } = this.props;
     const { loadingError } = this.state;
 
     const classNames = classnames('element-editor-editform', extraClass);
-    const schemaUrl = loadElementSchemaValue('schemaUrl', elementId);
+    const schemaUrl = loadElementSchemaValue('schemaUrl', element.id);
 
     const formProps = {
       formTag: 'div',
       schemaUrl,
       identifier: 'element',
       refetchSchemaOnMount: !formHasState,
+      // Reload the form any time the element version changes, so other react components
+      // within the form have their state completely recreated
+      refetchSchemaCriteria: JSON.stringify([element.version, element.isPublished, element.isLiveVersion]),
       onLoadingError: this.handleLoadingError,
     };
 
@@ -75,12 +79,12 @@ class InlineEditForm extends PureComponent {
 InlineEditForm.propTypes = {
   extraClass: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   onClick: PropTypes.func,
-  elementId: PropTypes.string,
+  element: elementType,
   handleLoadingError: PropTypes.func,
 };
 
 function mapStateToProps(state, ownProps) {
-  const formName = loadElementFormStateName(ownProps.elementId);
+  const formName = loadElementFormStateName(ownProps.element.id);
 
   return {
     formHasState: state.form.formState && state.form.formState.element &&

client/src/types/elementType.js

@@ -6,8 +6,8 @@ const elementType = PropTypes.shape({
   title: PropTypes.string,
   blockSchema: PropTypes.object,
   inlineEditable: PropTypes.bool,
-  published: PropTypes.bool,
-  liveVersion: PropTypes.bool,
+  isPublished: PropTypes.bool,
+  isLiveVersion: PropTypes.bool,
   version: PropTypes.number
 });