Fix scroll to resource

packages/web-app-files/src/components/FilesList/KeyboardActions.vue

@@ -6,8 +6,10 @@
 import { bus } from 'web-pkg/src/instance'
 import { mapActions, mapState, mapMutations } from 'vuex'
 import { defineComponent } from '@vue/composition-api'
+import MixinFilesListScrolling from '../../mixins/filesListScrolling'
 
 export default defineComponent({
+  mixins: [MixinFilesListScrolling],
   props: {
     paginatedResources: {
       type: Array,
@@ -111,6 +113,7 @@ export default defineComponent({
       this.resetSelectionCursor()
       this.resetFileSelection()
       this.addFileSelection({ id: nextId })
+      this.scrollToResource({ id: nextId })
     },
 
     handleShiftClickAction(resource) {
@@ -166,6 +169,7 @@ export default defineComponent({
         // select
         this.addFileSelection({ id: nextResourceId })
       }
+      this.scrollToResource({ id: nextResourceId })
       this.selectionCursor = this.selectionCursor - 1
     },
 
@@ -180,6 +184,7 @@ export default defineComponent({
         // select
         this.addFileSelection({ id: nextResourceId })
       }
+      this.scrollToResource({ id: nextResourceId })
       this.selectionCursor = this.selectionCursor + 1
     },
 

packages/web-app-files/src/mixins/filesListScrolling.js

@@ -1,13 +1,8 @@
 export default {
   methods: {
     scrollToResource(resource) {
-      const appBar = document.querySelector('#files-app-bar')
-      let offset = appBar.getBoundingClientRect().bottom
-
-      const tableHeader = document.querySelector('.files-table thead')
-      offset += tableHeader.getBoundingClientRect().height
-
-      this.$scrollTo(`.oc-tbody-tr-${resource.getDomSelector()}`, 300, { offset: -offset })
+      const resourceElement = document.querySelectorAll(`[data-item-id='${resource.id}']`)[0]
+      resourceElement.scrollIntoView({ block: 'end' })
     }
   }
 }