fix: model and file edit mode stuck

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,

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";
@@ -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;
@@ -152,6 +155,13 @@ export default {
       },
     );
 
+    onBeforeUnmount(() => {
+      clearTimeout(focusTimeout);
+      if (props.editMode) {
+        emit("close");
+      }
+    });
+
     const displayModelInfo = (file) => {
       if (!isFolder(file)) {
         return isConvertible(file) || isConvertibleToPhotosphere(file);

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,

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,
     };
   },
 };

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";
@@ -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;
@@ -134,6 +137,13 @@ export default {
       }
     );
 
+    onBeforeUnmount(() => {
+      clearTimeout(focusTimeout);
+      if (props.editMode) {
+        emit("close");
+      }
+    });
+
     return {
       // References
       hasError,

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 };
+}

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);
+  });
+});