fix/COMPASS-9798 sync field name to prop (#153)

Author: paula-stacho

src/components/field/field-name-content.tsx

@@ -32,6 +32,10 @@ export const FieldNameContent = ({ name, isEditable, onChange }: FieldNameProps)
   const [value, setValue] = useState(name);
   const textInputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    setValue(name);
+  }, [name]);
+
   const handleSubmit = useCallback(() => {
     setIsEditing(false);
     onChange?.(value);

src/components/field/field.test.tsx

@@ -141,6 +141,17 @@ describe('field', () => {
       await userEvent.dblClick(fieldName);
       expect(screen.queryByDisplayValue('ordersId')).not.toBeUndefined();
     });
+
+    it('Should sync with prop changes', async () => {
+      const originalName = 'originalName';
+      const newName = 'newName';
+      const { rerender } = render(
+        <FieldWithEditableInteractions {...DEFAULT_PROPS} editable={true} name={originalName} />,
+      );
+      expect(screen.getByText(originalName)).toBeInTheDocument();
+      await rerender(<FieldWithEditableInteractions {...DEFAULT_PROPS} editable={true} name={newName} />);
+      expect(screen.getByText(newName)).toBeInTheDocument();
+    });
   });
 
   describe('With specific types', () => {