[Notebook]: Error in nextTick: "TypeError: Cannot read property 'focus' of null" #2845 (#2857)

src/plugins/notebook/components/notebook.vue

@@ -80,10 +80,10 @@
                 </span>
             </div>
             <div v-if="selectedSection && selectedPage"
+                 ref="notebookEntries"
                  class="c-notebook__entries"
             >
                 <NotebookEntry v-for="entry in filteredAndSortedEntries"
-                               ref="notebookEntry"
                                :key="entry.id"
                                :entry="entry"
                                :domain-object="internalDomainObject"
@@ -122,6 +122,7 @@ export default {
             defaultPageId: getDefaultNotebook() ? getDefaultNotebook().page.id : '',
             defaultSectionId: getDefaultNotebook() ? getDefaultNotebook().section.id : '',
             defaultSort: this.domainObject.configuration.defaultSort,
+            focusEntryId: null,
             internalDomainObject: this.domainObject,
             search: '',
             showTime: 0,
@@ -174,6 +175,11 @@ export default {
             this.unlisten();
         }
     },
+    updated: function () {
+        this.$nextTick(function () {
+            this.focusOnEntryId();
+        })
+    },
     methods: {
         addDefaultClass() {
             const classList = this.internalDomainObject.classList || [];
@@ -245,6 +251,20 @@ export default {
             const embed = createNewEmbed(snapshotMeta);
             this.newEntry(embed);
         },
+        focusOnEntryId() {
+            if (!this.focusEntryId) {
+                return;
+            }
+
+            const element = this.$refs.notebookEntries.querySelector(`#${this.focusEntryId}`);
+
+            if (!element) {
+                return;
+            }
+
+            element.focus();
+            this.focusEntryId = null;
+        },
         formatSidebar() {
             /*
                 Determine if the sidebar should slide over content, or compress it
@@ -366,13 +386,8 @@ export default {
             this.updateDefaultNotebook(selectedSection, selectedPage);
             const notebookStorage = getDefaultNotebook();
             const id = addNotebookEntry(this.openmct, this.internalDomainObject, notebookStorage, embed);
-
-            this.$nextTick(() => {
-                const element = this.$el.querySelector(`#${id}`);
-                element.focus();
-            });
-
-            return id;
+            this.focusEntryId = id;
+            this.search = '';
         },
         orientationChange() {
             this.formatSidebar();