wip make categories selectable by tab

src/components/EmojiPicker/EmojiPicker.vue

@@ -91,11 +91,13 @@
 		:open.sync="open"
 		:container="container"
 		popover-class="emoji-popover"
-		popover-inner-class="popover-emoji-picker-inner">
+		popover-inner-class="popover-emoji-picker-inner"
+		@after-show="onOpen">
 		<template #trigger>
 			<slot />
 		</template>
 		<Picker
+			ref="picker"
 			:auto-focus="true"
 			color="var(--color-primary)"
 			:data="emojiIndex"
@@ -191,6 +193,7 @@ export default {
 				},
 			},
 			open: false,
+			focusIndex: 0,
 		}
 	},
 	computed: {
@@ -214,6 +217,41 @@ export default {
 				this.open = false
 			}
 		},
+		onOpen() {
+			const picker = this.$refs.picker
+
+			// set listener for tab-event
+			picker.$el.children[0].addEventListener('keydown', this.handleKeydown)
+
+			// set focus on first anchor element
+			picker.$el.children[0].children[0].childNodes[0].focus()
+
+		},
+		handleKeydown(e) {
+			// handle tab
+			if (e.keyCode === 9) {
+				this.focusIndexCounter()
+				this.setScrollFromChangedIndex(this.focusIndex)
+			}
+		},
+		focusIndexCounter() {
+			this.focusIndex++
+		},
+		setScrollFromChangedIndex(index) {
+			const picker = this.$refs.picker
+			const component = picker.getCategoryComponent(index)
+
+			const scrollToComponent = () => {
+				if (component) {
+					let top = component.$el.offsetTop
+					if (index === 0) {
+						top = 0
+					}
+					picker.$refs.scroll.scrollTop = top
+				}
+			}
+			scrollToComponent()
+		},
 	},
 }
 </script>
@@ -281,6 +319,9 @@ export default {
 			border-radius: 0;
 			padding: 12px 4px;
 			height: auto;
+			.emoji-mart-anchor-selected{
+				bottom: 0;
+			}
 		}
 	}
 
@@ -306,11 +347,13 @@ export default {
 			// 8 emoji per row
 			flex-basis: calc(100% / 8);
 			text-align: center;
-
 			&:hover::before {
-				background-color: var(--color-background-hover);
+				background-color: red;
 			}
 		}
+		.emoji-mart-emoji-selected{
+			background-color: red;
+		}
 	}
 
 }