Fixed label name updation bug (ToolJet#3758)

jbzhang99 · Aug 9, 2022 · 9ea2d4c · 9ea2d4c
1 parent fb6a4f6
commit 9ea2d4c
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 21 deletions.
diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
@@ -682,28 +682,30 @@ class Editor extends React.Component {
   componentDefinitionChanged = (componentDefinition) => {
     let _self = this;
 
-    const newDefinition = {
-      appDefinition: produce(this.state.appDefinition, (draft) => {
-        draft.components[componentDefinition.id].component = componentDefinition.component;
-      }),
-    };
+    if (this.state.appDefinition?.components[componentDefinition.id]) {
+      const newDefinition = {
+        appDefinition: produce(this.state.appDefinition, (draft) => {
+          draft.components[componentDefinition.id].component = componentDefinition.component;
+        }),
+      };
 
-    produce(
-      this.state.appDefinition,
-      (draft) => {
-        draft.components[componentDefinition.id].component = componentDefinition.component;
-      },
-      this.handleAddPatch
-    );
-    setStateAsync(_self, newDefinition).then(() => {
-      computeComponentState(_self, _self.state.appDefinition.components);
-      this.setState({ isSaving: true });
-      this.autoSave();
-      this.props.ymap?.set('appDef', {
-        newDefinition: newDefinition.appDefinition,
-        editingVersionId: this.state.editingVersion?.id,
+      produce(
+        this.state.appDefinition,
+        (draft) => {
+          draft.components[componentDefinition.id].component = componentDefinition.component;
+        },
+        this.handleAddPatch
+      );
+      setStateAsync(_self, newDefinition).then(() => {
+        computeComponentState(_self, _self.state.appDefinition.components);
+        this.setState({ isSaving: true });
+        this.autoSave();
+        this.props.ymap?.set('appDef', {
+          newDefinition: newDefinition.appDefinition,
+          editingVersionId: this.state.editingVersion?.id,
+        });
       });
-    });
+    }
   };
 
   handleEditorEscapeKeyPress = () => {

diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useLayoutEffect } from 'react';
+import React, { useState, useRef, useLayoutEffect, useEffect } from 'react';
 import Tabs from 'react-bootstrap/Tabs';
 import Tab from 'react-bootstrap/Tab';
 import { componentTypes } from '../WidgetManager/components';
@@ -38,6 +38,7 @@ export const Inspector = ({
   // eslint-disable-next-line no-unused-vars
   const [tabHeight, setTabHeight] = React.useState(0); //?
   const tabsRef = useRef(null);
+  const componentNameRef = useRef(null);
   const [newComponentName, setNewComponentName] = useState(component.component.name);
   const [inputRef, setInputFocus] = useFocus();
 
@@ -52,6 +53,17 @@ export const Inspector = ({
     }
   }, []);
 
+  useEffect(() => {
+    componentNameRef.current = newComponentName;
+  }, [newComponentName]);
+
+  useEffect(() => {
+    return () => {
+      handleComponentNameChange(componentNameRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const validateComponentName = (name) => {
     const isValid = !Object.values(allComponents)
       .map((component) => component.component.name)
@@ -64,6 +76,7 @@ export const Inspector = ({
   };
 
   function handleComponentNameChange(newName) {
+    if (component.component.name === newName) return;
     if (newName.length === 0) {
       toast.error('Widget name cannot be empty');
       return setInputFocus();