Form fn on update form data (#1789)

* added onChangeFormData prop to Form component

* added preventDefault on addBlock button to prevent form submit if blocksForm is used inside a <form> tag

* added preventDefault on button click if blocks are reused in form, and make componentDidUpdate async in form

* updated changelog

* fixed updating formData

* removed updating state from props because usless

Co-authored-by: Giulia Ghisini <giulia.ghisini@redturtle.it>
Co-authored-by: Víctor Fernández de Alba <sneridagh@gmail.com>

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 ### Feature
 
+- Added onChangeFormData prop to Form component @giuliaghisini
 - Internationalization story for add-ons @sneridagh
 
 ### Bugfix

src/components/manage/Blocks/Image/Edit.jsx

@@ -317,6 +317,7 @@ class Edit extends Component {
                             icon
                             onClick={(e) => {
                               e.stopPropagation();
+                              e.preventDefault();
                               this.props.openObjectBrowser();
                             }}
                           >

src/components/manage/Blocks/Text/Edit.jsx

@@ -189,8 +189,10 @@ class Edit extends Component {
     this.setState({ editorState });
   }
 
-  toggleAddNewBlock = () =>
+  toggleAddNewBlock = (e) => {
+    e.preventDefault();
     this.setState((state) => ({ addNewBlockOpened: !state.addNewBlockOpened }));
+  };
 
   handleClickOutside = (e) => {
     if (

src/components/manage/Form/Form.jsx

@@ -87,6 +87,7 @@ class Form extends Component {
     description: PropTypes.string,
     visual: PropTypes.bool,
     blocks: PropTypes.arrayOf(PropTypes.object),
+    onChangeFormData: PropTypes.func,
     requestError: PropTypes.string,
     allowedBlocks: PropTypes.arrayOf(PropTypes.string),
     showRestricted: PropTypes.bool,
@@ -202,7 +203,7 @@ class Form extends Component {
    * also the first Tab to have any errors will be selected
    * @param {Object} prevProps
    */
-  componentDidUpdate(prevProps) {
+  async componentDidUpdate(prevProps, prevState) {
     let { requestError } = this.props;
     let errors = {};
     let activeIndex = 0;
@@ -221,6 +222,15 @@ class Form extends Component {
         activeIndex,
       });
     }
+
+    if (this.props.onChangeFormData) {
+      if (
+        JSON.stringify(prevState?.formData) !==
+        JSON.stringify(this.state.formData)
+      ) {
+        this.props.onChangeFormData(this.state.formData);
+      }
+    }
   }
 
   /**