From 32e113a6e4cf15e3c89b6d3a1a9dda682b8f150e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Lagier?= <gaetan.lagier@hotmail.fr>
Date: Wed, 14 Oct 2026 17:25:36 +0200
Subject: [PATCH 1/2] fix: model and file edit mode stuck

---
 .../files/files-table/file-name-cell/FileNameCell.vue     | 8 +++++++-
 .../models/models-table/model-name-cell/ModelNameCell.vue | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue b/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue
index e74af99e5..1fd14fc62 100644
--- a/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue
+++ b/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import { ref, watch, computed } from "vue";
+import { ref, watch, computed, onBeforeUnmount } from "vue";
 import { useFiles } from "../../../../../state/files.js";
 import { debounce } from "../../../../../utils/async.js";
 import { isFolder } from "../../../../../utils/file-structure.js";
@@ -152,6 +152,12 @@ export default {
       },
     );
 
+    onBeforeUnmount(() => {
+      if (props.editMode) {
+        emit("close");
+      }
+    });
+
     const displayModelInfo = (file) => {
       if (!isFolder(file)) {
         return isConvertible(file) || isConvertibleToPhotosphere(file);
diff --git a/src/components/specific/models/models-table/model-name-cell/ModelNameCell.vue b/src/components/specific/models/models-table/model-name-cell/ModelNameCell.vue
index fc57a4e4d..071ab1d5a 100644
--- a/src/components/specific/models/models-table/model-name-cell/ModelNameCell.vue
+++ b/src/components/specific/models/models-table/model-name-cell/ModelNameCell.vue
@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import { ref, watch } from "vue";
+import { ref, watch, onBeforeUnmount } from "vue";
 import { MODEL_CONFIG, MODEL_TYPE } from "../../../../../config/models.js";
 import { useModels } from "../../../../../state/models.js";
 import { debounce } from "../../../../../utils/async.js";
@@ -134,6 +134,12 @@ export default {
       }
     );
 
+    onBeforeUnmount(() => {
+      if (props.editMode) {
+        emit("close");
+      }
+    });
+
     return {
       // References
       hasError,

From 8318e48365c292b59ff2438c6889632fae05243f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Lagier?= <gaetan.lagier@hotmail.fr>
Date: Thu, 15 Oct 2026 09:40:10 +0200
Subject: [PATCH 2/2] fix: editable name use composable

feature change: only one edit at a time
---
 .../files/all-files-table/AllFilesTable.vue   | 22 ++---
 .../file-name-cell/FileNameCell.vue           |  6 +-
 .../files/folder-table/FoldersTable.vue       | 22 ++---
 .../models/models-table/ModelsTable.vue       | 23 ++---
 .../model-name-cell/ModelNameCell.vue         |  6 +-
 src/composables/name-editing.js               | 17 ++++
 tests/unit/composables/name-editing.spec.js   | 85 +++++++++++++++++++
 7 files changed, 137 insertions(+), 44 deletions(-)
 create mode 100644 src/composables/name-editing.js
 create mode 100644 tests/unit/composables/name-editing.spec.js

diff --git a/src/components/specific/files/all-files-table/AllFilesTable.vue b/src/components/specific/files/all-files-table/AllFilesTable.vue
index cbeca91a1..4c48b836c 100644
--- a/src/components/specific/files/all-files-table/AllFilesTable.vue
+++ b/src/components/specific/files/all-files-table/AllFilesTable.vue
@@ -172,8 +172,8 @@
               :file="file"
               @file-clicked="$emit('file-clicked', $event)"
               @open-versioning-manager="$emit('open-versioning-manager', $event)"
-              :editMode="nameEditMode[file.id]"
-              @close="nameEditMode[file.id] = false"
+              :editMode="editedNameId === file.id"
+              @close="closeNameEditor(file.id)"
             />
           </div>
           <div
@@ -222,7 +222,7 @@
               @open-versioning-manager="$emit('open-versioning-manager', file)"
               @open-visa-manager="$emit('open-visa-manager', file)"
               @remove-model="$emit('remove-model', file)"
-              @update="nameEditMode[file.id] = true"
+              @update="editedNameId = file.id"
             />
           </div>
         </div>
@@ -231,10 +231,11 @@
   </div>
 </template>
 <script>
-import { computed, reactive, ref, watch } from "vue";
+import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import columnsDef, { columnsMD, columnsLG, columnsXL, columnsXXL } from "./columns.js";
 import { useStandardBreakpoints } from "../../../../composables/responsive.js";
+import { useNameEditing } from "../../../../composables/name-editing.js";
 import { formatBytes, fileExtension } from "../../../../utils/files.js";
 import useSortAndFilter from "./sortAndFilter.js";
 
@@ -336,15 +337,7 @@ export default {
         .sort((a, b) => a.localeCompare(b));
     });
 
-    let nameEditMode;
-    watch(
-      () => props.files,
-      (files) => {
-        nameEditMode = reactive({});
-        files.forEach((row) => (nameEditMode[row.id] = false));
-      },
-      { immediate: true },
-    );
+    const { editedNameId, closeNameEditor } = useNameEditing(() => props.files);
 
     const {
       sortObject,
@@ -393,11 +386,12 @@ export default {
       // References
       columns,
       mainSelectionCheckboxValue,
-      nameEditMode,
+      editedNameId,
       formattedAllFiles,
       sortedTypeColumnData,
       visibleColumnIds,
       // Methods
+      closeNameEditor,
       formatBytes,
       updateFilters,
       onFileSelectionChange,
diff --git a/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue b/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue
index 1fd14fc62..d0e266ef9 100644
--- a/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue
+++ b/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue
@@ -124,12 +124,15 @@ export default {
     }, 500);
 
     const showUpdateForm = ref(false);
+    let focusTimeout;
     const openUpdateForm = () => {
       showUpdateForm.value = true;
       fileName.value = props.file.name;
-      setTimeout(() => nameInput.value.focus(), 200);
+      clearTimeout(focusTimeout);
+      focusTimeout = setTimeout(() => nameInput.value?.focus(), 200);
     };
     const closeUpdateForm = () => {
+      clearTimeout(focusTimeout);
       loading.value = false;
       hasError.value = false;
       showUpdateForm.value = false;
@@ -153,6 +156,7 @@ export default {
     );
 
     onBeforeUnmount(() => {
+      clearTimeout(focusTimeout);
       if (props.editMode) {
         emit("close");
       }
diff --git a/src/components/specific/files/folder-table/FoldersTable.vue b/src/components/specific/files/folder-table/FoldersTable.vue
index 46bb57989..1ca35e95b 100644
--- a/src/components/specific/files/folder-table/FoldersTable.vue
+++ b/src/components/specific/files/folder-table/FoldersTable.vue
@@ -65,8 +65,8 @@
         :file="file"
         @file-clicked="$emit('file-clicked', $event)"
         @open-versioning-manager="$emit('open-versioning-manager', $event)"
-        :editMode="nameEditMode[file.id]"
-        @close="nameEditMode[file.id] = false"
+        :editMode="editedNameId === file.id"
+        @close="closeNameEditor(file.id)"
       />
     </template>
     <template #column-filter-empty>
@@ -100,17 +100,18 @@
         @open-versioning-manager="$emit('open-versioning-manager', file)"
         @open-visa-manager="$emit('open-visa-manager', file)"
         @remove-model="$emit('remove-model', file)"
-        @update="nameEditMode[file.id] = true"
+        @update="editedNameId = file.id"
       />
     </template>
   </BIMDataTable>
 </template>
 
 <script>
-import { computed, reactive, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import columnsDef, { columnsLG, columnsXL } from "./columns.js";
 import { useStandardBreakpoints } from "../../../../composables/responsive.js";
+import { useNameEditing } from "../../../../composables/name-editing.js";
 import { isFolder } from "../../../../utils/file-structure.js";
 import { formatBytes, generateFileKey, fileExtension } from "../../../../utils/files.js";
 
@@ -230,15 +231,7 @@ export default {
       emit("selection-changed", visibleSelection);
     };
 
-    let nameEditMode;
-    watch(
-      () => props.files,
-      (files) => {
-        nameEditMode = reactive({});
-        files.forEach((row) => (nameEditMode[row.id] = false));
-      },
-      { immediate: true },
-    );
+    const { editedNameId, closeNameEditor } = useNameEditing(() => props.files);
 
     const fileUploads = ref([]);
     watch(
@@ -287,8 +280,9 @@ export default {
       fileUploads,
       folderUploads,
       formattedFiles,
-      nameEditMode,
+      editedNameId,
       // Methods
+      closeNameEditor,
       cleanUpload,
       formatBytes,
       isFolder,
diff --git a/src/components/specific/models/models-table/ModelsTable.vue b/src/components/specific/models/models-table/ModelsTable.vue
index 051075d54..e916d0404 100644
--- a/src/components/specific/models/models-table/ModelsTable.vue
+++ b/src/components/specific/models/models-table/ModelsTable.vue
@@ -37,8 +37,8 @@
       <ModelNameCell
         :project="project"
         :model="model"
-        :editMode="nameEditMode[model.id]"
-        @close="nameEditMode[model.id] = false"
+        :editMode="editedNameId === model.id"
+        @close="closeNameEditor(model.id)"
       />
     </template>
     <template #cell-tags="{ row: model }">
@@ -71,7 +71,7 @@
         @delete="$emit('delete', $event)"
         @download="$emit('download', $event)"
         @unarchive="$emit('unarchive', $event)"
-        @update="nameEditMode[model.id] = true"
+        @update="editedNameId = model.id"
         @view-metaBuilding="$emit('view-metaBuilding', $event)"
         @edit-metaBuilding="$emit('edit-metaBuilding', $event)"
         @view-photosphereBuilding="$emit('view-photosphereBuilding', $event)"
@@ -88,10 +88,11 @@
 </template>
 
 <script>
-import { ref, computed, reactive, watch } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import columnsDef from "./columns.js";
 import { useStandardBreakpoints } from "../../../../composables/responsive.js";
+import { useNameEditing } from "../../../../composables/name-editing.js";
 import { useFiles } from "../../../../state/files.js";
 import { collectDescendants } from "../../../../utils/file-tree.js";
 import { isFolder } from "../../../../utils/file-structure.js";
@@ -170,15 +171,7 @@ export default {
       }));
     });
 
-    let nameEditMode;
-    watch(
-      () => props.models,
-      () => {
-        nameEditMode = reactive({});
-        props.models.forEach((model) => (nameEditMode[model.id] = false));
-      },
-      { immediate: true },
-    );
+    const { editedNameId, closeNameEditor } = useNameEditing(() => props.models);
 
     const getFoldersInFolder = (folder) => collectDescendants(folder, isFolder);
     const getFilesInFolder = (folder) => collectDescendants(folder, (child) => !isFolder(child));
@@ -232,8 +225,10 @@ export default {
       columns,
       modelsTable,
       modelsWithTags,
-      nameEditMode,
+      editedNameId,
       fileStructure: projectFileStructure,
+      // Methods
+      closeNameEditor,
     };
   },
 };
diff --git a/src/components/specific/models/models-table/model-name-cell/ModelNameCell.vue b/src/components/specific/models/models-table/model-name-cell/ModelNameCell.vue
index 071ab1d5a..5e6ef0d0f 100644
--- a/src/components/specific/models/models-table/model-name-cell/ModelNameCell.vue
+++ b/src/components/specific/models/models-table/model-name-cell/ModelNameCell.vue
@@ -107,11 +107,14 @@ export default {
     }, 500);
 
     const showUpdateForm = ref(false);
+    let focusTimeout;
     const openUpdateForm = () => {
       showUpdateForm.value = true;
-      setTimeout(() => nameInput.value.focus(), 200);
+      clearTimeout(focusTimeout);
+      focusTimeout = setTimeout(() => nameInput.value?.focus(), 200);
     };
     const closeUpdateForm = () => {
+      clearTimeout(focusTimeout);
       loading.value = false;
       hasError.value = false;
       showUpdateForm.value = false;
@@ -135,6 +138,7 @@ export default {
     );
 
     onBeforeUnmount(() => {
+      clearTimeout(focusTimeout);
       if (props.editMode) {
         emit("close");
       }
diff --git a/src/composables/name-editing.js b/src/composables/name-editing.js
new file mode 100644
index 000000000..530477091
--- /dev/null
+++ b/src/composables/name-editing.js
@@ -0,0 +1,17 @@
+import { ref, watch } from "vue";
+
+export function useNameEditing(rows) {
+  const editedNameId = ref(null);
+
+  const closeNameEditor = id => {
+    if (editedNameId.value === id) {
+      editedNameId.value = null;
+    }
+  };
+
+  watch(rows, () => {
+    editedNameId.value = null;
+  });
+
+  return { editedNameId, closeNameEditor };
+}
diff --git a/tests/unit/composables/name-editing.spec.js b/tests/unit/composables/name-editing.spec.js
new file mode 100644
index 000000000..cb50baaab
--- /dev/null
+++ b/tests/unit/composables/name-editing.spec.js
@@ -0,0 +1,85 @@
+import { effectScope, nextTick, ref, watch } from "vue";
+import { useNameEditing } from "../../../src/composables/name-editing.js";
+
+describe("useNameEditing", () => {
+  let scope;
+  let rows;
+  let editedNameId;
+  let closeNameEditor;
+
+  beforeEach(() => {
+    scope = effectScope();
+    rows = ref([{ id: 1 }, { id: 2 }]);
+    ({ editedNameId, closeNameEditor } = scope.run(() =>
+      useNameEditing(() => rows.value)
+    ));
+  });
+
+  afterEach(() => {
+    scope.stop();
+  });
+
+  it("starts with no editor open", () => {
+    expect(editedNameId.value).toBeNull();
+  });
+
+  it("allows only one row to be edited at a time", () => {
+    editedNameId.value = 1;
+    editedNameId.value = 2;
+
+    expect(rows.value.filter(row => row.id === editedNameId.value)).toEqual([{ id: 2 }]);
+  });
+
+  it("ignores close events from the previously edited or unmounted row", () => {
+    editedNameId.value = 1;
+    editedNameId.value = 2;
+    closeNameEditor(1);
+
+    expect(editedNameId.value).toBe(2);
+  });
+
+  it("keeps the new editor open when the old editor reacts to editMode becoming false", async () => {
+    scope.run(() => {
+      watch(
+        () => editedNameId.value === 1,
+        editing => {
+          if (!editing) closeNameEditor(1);
+        }
+      );
+    });
+
+    editedNameId.value = 1;
+    await nextTick();
+    editedNameId.value = 2;
+    await nextTick();
+
+    expect(editedNameId.value).toBe(2);
+  });
+
+  it("clears editing when the active row closes or unmounts", () => {
+    editedNameId.value = 1;
+    closeNameEditor(1);
+
+    expect(editedNameId.value).toBeNull();
+  });
+
+  it("handles a zero ID without treating it as no editor", () => {
+    editedNameId.value = 0;
+    closeNameEditor(1);
+    expect(editedNameId.value).toBe(0);
+
+    closeNameEditor(0);
+    expect(editedNameId.value).toBeNull();
+  });
+
+  it("resets editing when the row collection is replaced", async () => {
+    editedNameId.value = 1;
+    rows.value = [{ id: 1 }, { id: 3 }];
+    await nextTick();
+
+    expect(editedNameId.value).toBeNull();
+
+    editedNameId.value = 3;
+    expect(editedNameId.value).toBe(3);
+  });
+});