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>

src/components/EmojiList.vue

@@ -65,22 +65,38 @@ 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: {
 		t,
 		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
 			}