[2579] Fix invalid cursor position when typing a new label directly

Bug: #2579 Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr> Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>
eclipse-sirius · Dec 14, 2023 · 2c8812a · 2c8812a
1 parent 6cdcb2e
commit 2c8812a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 2 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -77,6 +77,7 @@ const nodeTypeRegistry: NodeTypeRegistry = {
 - https://github.com/eclipse-sirius/sirius-web/issues/2812[#2812] [trees] Fix an issue that prevents icon to be displayed in treeNodes.
 - https://github.com/eclipse-sirius/sirius-web/issues/2580[#2580] [diagram] Cancel direct edit on 'Esc'.
 - https://github.com/eclipse-sirius/sirius-web/issues/2778[#2778] [diagram] Authorize empty string for direct edit.
+- https://github.com/eclipse-sirius/sirius-web/issues/2579[#2579] [diagram] Fix the invalid text cursor position when editing a label by typing text directly.
 
 === New Features
 

diff --git a/integration-tests/cypress/e2e/project/diagrams/direct-edit-label.cy.ts b/integration-tests/cypress/e2e/project/diagrams/direct-edit-label.cy.ts
@@ -118,6 +118,17 @@ describe('Diagram - Direct edit label', () => {
         diagram.getNodes('diagram', 'Entity2').should('exist');
         diagram.getNodes('diagram', 'test').should('not.exist');
       });
+
+      it('Then we can set the correct name when typing directly', () => {
+        const explorer = new Explorer();
+        explorer.createObject('Root', 'Entity2s Entity2');
+        const details = new Details();
+        details.getTextField('Name').type('Entity2{Enter}');
+
+        const diagram = new Diagram();
+        diagram.getNodes('diagram', 'Entity2').type('NewName{enter}');
+        diagram.getNodes('diagram', 'NewName').should('exist');
+      });
     });
   });
 });
diff --git a/.../sirius-components-diagrams-reactflow/src/renderer/direct-edit/DiagramDirectEditInput.tsx b/.../sirius-components-diagrams-reactflow/src/renderer/direct-edit/DiagramDirectEditInput.tsx
@@ -140,6 +140,13 @@ export const DiagramDirectEditInput = ({ labelId, editingKey, onClose, transform
     return cleanup;
   }, [initialLabelItemError, initialLabelItemData]);
 
+  useEffect(() => {
+    if (textInput.current) {
+      const text = textInput.current.value;
+      textInput.current.setSelectionRange(text.length, text.length);
+    }
+  }, [textInput.current]);
+
   const doRename = () => {
     renameElement({
       variables: {
@@ -185,7 +192,7 @@ export const DiagramDirectEditInput = ({ labelId, editingKey, onClose, transform
         name="name"
         size="small"
         inputRef={textInput}
-        placeholder={'Enter the new name'}
+        placeholder={'Enter the new value'}
         value={state.newLabel}
         multiline={true}
         onChange={handleChange}

diff --git a/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItemDirectEditInput.tsx b/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItemDirectEditInput.tsx
@@ -165,7 +165,7 @@ export const TreeItemDirectEditInput = ({
         name="name"
         size="small"
         inputRef={textInput}
-        placeholder={'Enter the new name'}
+        placeholder={'Enter the new value'}
         value={state.newLabel}
         onChange={handleChange}
         onFocus={onFocusIn}