Fix Tiny bug in Html field when using dependsOn keystonejs#3551

Gail9527 · Oct 2, 2016 · 4b7e7bb · 4b7e7bb
1 parent e92832e
commit 4b7e7bb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 20 deletions.
diff --git a/admin/client/App/screens/Item/components/EditForm.js b/admin/client/App/screens/Item/components/EditForm.js
@@ -259,12 +259,6 @@ var EditForm = React.createClass({
 				if (typeof Fields[field.type] !== 'function') {
 					return React.createElement(InvalidFieldType, { type: field.type, path: field.path, key: field.path });
 				}
-				if (props.dependsOn) {
-					props.currentDependencies = {};
-					Object.keys(props.dependsOn).forEach(dep => {
-						props.currentDependencies[dep] = this.state.values[dep];
-					});
-				}
 				props.key = field.path;
 				if (index === 0 && this.state.focusFirstField) {
 					props.autoFocus = true;

diff --git a/fields/types/html/HtmlField.js b/fields/types/html/HtmlField.js
@@ -3,6 +3,7 @@ import Field from '../Field';
 import React from 'react';
 import tinymce from 'tinymce';
 import { FormInput } from 'elemental';
+import evalDependsOn from '../../utils/evalDependsOn';
 
 /**
  * TODO:
@@ -35,6 +36,7 @@ module.exports = Field.create({
 		return {
 			id: getId(),
 			isFocused: false,
+      wysiwygActive: false,
 		};
 	},
 
@@ -53,29 +55,34 @@ module.exports = Field.create({
 
 		this._currentValue = this.props.value;
 		tinymce.init(opts);
+    this.setState({ wysiwygActive: true });
 	},
 
+  removeWysiwyg (state) {
+    removeTinyMCEInstance(tinymce.get(state.id));
+    this.setState({ wysiwygActive: false });
+  },
+
 	componentDidUpdate (prevProps, prevState) {
 		if (prevState.isCollapsed && !this.state.isCollapsed) {
 			this.initWysiwyg();
 		}
-
-		if (!_.isEqual(this.props.currentDependencies, prevProps.currentDependencies)) {
-			if (_.isEqual(prevProps.dependsOn, prevProps.currentDependencies)) {
-				var instance = tinymce.get(prevState.id);
-				if (instance) {
-					removeTinyMCEInstance(instance);
-				}
-			}
-
-			if (_.isEqual(this.props.dependsOn, this.props.currentDependencies)) {
-				this.initWysiwyg();
-			}
-		}
+
+    if (this.props.wysiwyg) {
+      if (evalDependsOn(this.props.dependsOn, this.props.values) ) {
+        if (!this.state.wysiwygActive) {
+          this.initWysiwyg();
+        }
+      } else if (this.state.wysiwygActive) {
+        this.removeWysiwyg(prevState);
+      }
+    }
 	},
 
 	componentDidMount () {
-		this.initWysiwyg();
+    if (evalDependsOn(this.props.dependsOn, this.props.values)) {
+      this.initWysiwyg();
+    }
 	},
 
 	componentWillReceiveProps (nextProps) {