Merge branch 'fetch-children-loaded-neighbor' into 'master'

Fetch children when switching to an element already loaded in the store

Closes #778

See merge request !1054

vue/Navigation/ChildrenTree/TreeItem.vue

@@ -111,10 +111,6 @@ export default {
   data: () => ({
     loading: false
   }),
-  mounted () {
-    // Automatically fetch tree parent children
-    if (this.isParent) this.fetchChildren()
-  },
   computed: {
     ...mapState('display', ['imageEdit', 'editionMode']),
     ...mapState('elements', [
@@ -270,9 +266,27 @@ export default {
     }
   },
   watch: {
+    element: {
+      immediate: true,
+      handler (newValue, oldValue) {
+        /*
+         * Automatically load all children if this TreeItem is the parent node of the tree.
+         * This is done as a watcher and not just in mounted as it is possible that the element changes without
+         * unmounting the component if the user switches between neighbors and the element is already in the store,
+         * for example when going back and forth between two elements multiple times,
+         * or when the element is in the selection or was in a navigation list.
+         */
+        if (oldValue?.id === newValue.id || !this.isParent) return
+        this.fetchChildren()
+      }
+    },
     selectedElement: {
       immediate: true,
       handler (newValue, oldValue) {
+        /*
+         * Open every TreeItem all the way down to a highlighted element.
+         * This uses the fact that the highlighting will load all parents into the `parents` state, and nothing else.
+         */
         if (!newValue || (oldValue && newValue === oldValue)) return
         const parents = this.parents[newValue.id]
         if (parents && parents.includes(this.node.element.id) && !this.node.expanded) {