fix: scrolling when using keyboard navigation

feed-item-row height is actual 110.66px, but setting this fixed is not optimal and should be changed in the future. Signed-off-by: Wolfgang <github@linux-dude.de>
nextcloud · Sep 29, 2024 · fb97832 · fb97832
1 parent 008c189
commit fb97832
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 12 deletions.
diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
@@ -235,7 +235,7 @@ export default Vue.extend({
 			return response.sort(this.sort)
 		},
 		// Trigger the click event programmatically to benefit from the item handling inside the FeedItemRow component
-		clickItem(item: FeedItem, alignToTop = false) {
+		clickItem(item: FeedItem) {
 			if (!item) {
 				return
 			}
@@ -249,8 +249,8 @@ export default Vue.extend({
 			if (element) {
 				element.click()
 				const virtualScroll = this.$refs.virtualScroll
-				// TODO: This is still jerky and even can derail the current item
-				// virtualScroll.showElement(element, alignToTop)
+				virtualScroll.showElement(element)
+
 			}
 		},
 		currentIndex(items: FeedItem[]): number {
@@ -266,7 +266,7 @@ export default Vue.extend({
 			// Jump to the previous item
 			if (currentIndex > 0) {
 				const previousItem = items[currentIndex - 1]
-				this.clickItem(previousItem, true)
+				this.clickItem(previousItem)
 			}
 		},
 		jumpToNextItem() {
@@ -275,7 +275,7 @@ export default Vue.extend({
 			// Jump to the first item, if none was selected, otherwise jump to the next item
 			if (currentIndex === -1 || (currentIndex < items.length - 1)) {
 				const nextItem = items[currentIndex + 1]
-				this.clickItem(nextItem, false)
+				this.clickItem(nextItem)
 			}
 		},
 	},

diff --git a/src/components/feed-display/VirtualScroll.vue b/src/components/feed-display/VirtualScroll.vue
@@ -10,7 +10,7 @@ import ItemSkeleton from './ItemSkeleton.vue'
 
 const GRID_ITEM_HEIGHT = 200 + 10
 // const GRID_ITEM_WIDTH = 250 + 10
-const LIST_ITEM_HEIGHT = 45 + 1
+const LIST_ITEM_HEIGHT = 110 + 1
 
 export default Vue.extend({
 	name: 'VirtualScroll',
@@ -47,9 +47,6 @@ export default Vue.extend({
 			this.$el.scrollTop = 0
 		},
 	},
-	created() {
-		this.elementToShowAlignToTop = false
-	},
 	mounted() {
 		this.onScroll()
 		window.addEventListener('resize', this.onScroll)
@@ -64,7 +61,6 @@ export default Vue.extend({
 		},
 		showElement(element, alignToTop) {
 			this.elementToShow = element
-			this.elementToShowAlignToTop = alignToTop
 		},
 	},
 	render(h) {
@@ -115,8 +111,7 @@ export default Vue.extend({
 		const scrollTop = this.scrollTop
 		this.$nextTick(() => {
 			if (this.elementToShow) {
-				// this.elementToShow.scrollIntoView(this.elementToShowAlignToTop)
-				this.elementToShow.scrollIntoView({ behavior: 'smooth', block: 'center' })
+				this.elementToShow.scrollIntoView({ behavior: 'auto', block: 'nearest' })
 				this.elementToShow = null
 			} else {
 				this.$el.scrollTop = scrollTop