From d24bede89c5938e7cb8bae42dbac0867be9ad1f2 Mon Sep 17 00:00:00 2001
From: Maxime Rainville <maxime@silverstripe.com>
Date: Tue, 13 Aug 2019 18:24:26 +1200
Subject: [PATCH] FIX Fix the the BlockLinkField clear action and update state
 on component update

---
 .../BlockLinkField/BlockLinkField.js          | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/client/src/components/BlockLinkField/BlockLinkField.js b/client/src/components/BlockLinkField/BlockLinkField.js
index 0d69ade..335ff9f 100644
--- a/client/src/components/BlockLinkField/BlockLinkField.js
+++ b/client/src/components/BlockLinkField/BlockLinkField.js
@@ -26,6 +26,8 @@ class BlockLinkField extends Component {
     this.handleClick = this.handleClick.bind(this);
     this.handleKeyUp = this.handleKeyUp.bind(this);
     this.handleSubmitModal = this.handleSubmitModal.bind(this);
+    this.componentDidMount = this.componentDidMount.bind(this);
+    this.componentDidUpdate = this.componentDidUpdate.bind(this);
 
     this.state = {
       isDirty: false,
@@ -34,22 +36,25 @@ class BlockLinkField extends Component {
     };
   }
 
+  componentDidMount() {
+    this.componentDidUpdate();
+  }
+
+
   /**
-   * When the component is mounted, parse the input value (provided as JSON) and store it
+   * When the component is updated, parse the input value (provided as JSON) and store it
    * in local state as a structured object.
    */
-  componentDidMount() {
-    const { value } = this.props;
-
-    if (value) {
-      // See https://github.com/yannickcr/eslint-plugin-react/issues/1707
-      this.setState({ // eslint-disable-line
-        value: JSON.parse(value),
-      });
-    } else { // JSON.parse fails on an empty string which is not valid JSON
-      this.setState({ // eslint-disable-line
-        value: {},
-      });
+  componentDidUpdate() {
+    const valueStr = this.props.value;
+    const value = valueStr ? JSON.parse(valueStr) : {};
+    const stateValue = this.state.value;
+    const stateNeedUpdate = ['PageID', 'TargetBlank', 'Text', 'Description']
+      .some((key) => value[key] !== stateValue[key]);
+
+    if (stateNeedUpdate) {
+        // See https://github.com/yannickcr/eslint-plugin-react/issues/1707
+        this.setState({value});// eslint-disable-line
     }
   }
 
@@ -108,6 +113,12 @@ class BlockLinkField extends Component {
               this.setState({
                 value: {},
               });
+
+              // Notify parent that the link has been cleared
+              const { onChange } = this.props;
+              if (onChange) {
+                onChange(JSON.stringify({ }));
+              }
             }
           };
         }