diff --git a/src/plugins/notebook/components/notebook.vue b/src/plugins/notebook/components/notebook.vue index 7122854e00..eeb73502c3 100644 --- a/src/plugins/notebook/components/notebook.vue +++ b/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();