From a82c69d59b686036be6238f311621d3da8738a3b Mon Sep 17 00:00:00 2001
From: Paula Stachova <paula.stachova@mongodb.com>
Date: Tue, 14 Oct 2025 12:13:52 +0200
Subject: [PATCH] fix/COMPASS-9798 sync field name to prop

---
 src/components/field/field-name-content.tsx |  4 ++++
 src/components/field/field.test.tsx         | 11 +++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/components/field/field-name-content.tsx b/src/components/field/field-name-content.tsx
index 62be542..05d7094 100644
--- a/src/components/field/field-name-content.tsx
+++ b/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);
diff --git a/src/components/field/field.test.tsx b/src/components/field/field.test.tsx
index 33f6a7c..3f376da 100644
--- a/src/components/field/field.test.tsx
+++ b/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', () => {