Autoscroll suggestion list when navigating the emoji suggestions

Navigating the suggestion list via arrow up/down keys is handled in
javascript, so we have to handle the scrolling in javascript too.

Only scrolls if the new selected item has not visible before.
At ArrowDown, scroll bottom of visible area to lower border of item.
At ArrowUp, scroll top of visible area to upper border of item.

Signed-off-by: Jonas <jonas@freesources.org>

1 files changed, 16 insertions, 0 deletions

diff --git a/src/components/EmojiList.vue b/src/components/EmojiList.vue
index 0e570c981..3b172eb8e 100644
--- a/src/components/EmojiList.vue
+++ b/src/components/EmojiList.vue
@@ -65,10 +65,20 @@ export default {
 		hasResults() {
 			return this.items.length > 0
 		},
+		itemHeight() {
+			return this.$el.scrollHeight / this.items.length
+		},
+		itemInsideScrollView() {
+			// If upper border of item is bigger or equal than scroll top
+			// and lower end of item is smaller or equal than scroll bottom
+			return this.selectedIndex * this.itemHeight >= this.$el.scrollTop
+				&& (this.selectedIndex + 1) * this.itemHeight <= this.$el.scrollTop + this.$el.clientHeight
+		},
 	},
 	watch: {
 		items() {
 			this.selectedIndex = 0
+			this.$el.scrollTop = 0
 		},
 	},
 	methods: {
@@ -76,11 +86,17 @@ export default {
 		onKeyDown({ event }) {
 			if (event.key === 'ArrowUp') {
 				this.selectedIndex = ((this.selectedIndex + this.items.length) - 1) % this.items.length
+				if (!this.itemInsideScrollView) {
+					this.$el.scrollTop = this.selectedIndex * this.itemHeight
+				}
 				return true
 			}
 
 			if (event.key === 'ArrowDown') {
 				this.selectedIndex = (this.selectedIndex + 1) % this.items.length
+				if (!this.itemInsideScrollView) {
+					this.$el.scrollTop = (this.selectedIndex + 1) * this.itemHeight - this.$el.clientHeight
+				}
 				return true
 			}