#122 Fixed an issue with editMode prop where it wouldn't save the value of the component

Author: giorgosart

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-easy-edit",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "description": "A react library for inline editing components",
   "keywords": [
     "content editable",
@@ -37,8 +37,8 @@
     "url": "https://github.com/giorgosart/react-easy-edit/issues"
   },
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -50,17 +50,17 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.11.6",
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
     "@rollup/plugin-babel": "^5.2.1",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.4",
+    "enzyme-adapter-react-16": "1.15.5",
     "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-scripts": "^3.4.4",
     "rollup": "2.32.1",
     "rollup-plugin-postcss": "^3.1.8",

src/demo/App.js

@@ -54,7 +54,8 @@ class App extends Component {
                       console.log("saved!")
                     }}
                     editMode={this.state.editMode}
-                    instructions={"Toggle me!"}
+                    hideCancelButton
+                    hideSaveButton
                 />
                 <EasyEdit
                     type={Types.TEXT}
@@ -63,6 +64,8 @@ class App extends Component {
                     }}
                     editMode={this.state.editMode}
                     instructions={"Toggle me!"}
+                    hideCancelButton
+                    hideSaveButton
                 />
               </div>
               <h3>Datalist</h3>

src/lib/EasyEdit.jsx

@@ -35,9 +35,13 @@ export default class EasyEdit extends React.Component {
     if (this.props.value !== prevProps.value) {
       this.setState({
         tempValue: this.props.value,
-        value: this.props.value
+        value: this.props.value,
       });
     }
+
+    if (this.props.editMode !== prevProps.editMode && !this.props.editMode) {
+      this._onSave();
+    }
   }
 
   onKeyDown = (e) => {

src/lib/EasyEdit.test.js

@@ -420,4 +420,11 @@ describe('EasyEdit', () => {
     expect(wrapper.find('input[name="test"]')).toHaveLength(1);
     expect(wrapper.find('.easy-edit-instructions').text()).toEqual("test");
   });
+
+  it('should save the value if the editMode prop is changed', () => {
+    wrapper.setProps({ editMode: true });
+    expect((wrapper.state().tempValue)).toEqual(null);
+    wrapper.setProps({ value: "Updated Value", editMode: false });
+    expect((wrapper.state().tempValue)).toEqual('Updated Value');
+  });
 });