fixup! wip make categories selectable by tab

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

src/components/EmojiPicker/EmojiPicker.vue

@@ -92,7 +92,7 @@
 		:container="container"
 		popover-class="emoji-popover"
 		popover-inner-class="popover-emoji-picker-inner"
-		@after-show="onOpen">
+		@after-show="afterShow">
 		<template #trigger>
 			<slot />
 		</template>
@@ -217,14 +217,13 @@ export default {
 				this.open = false
 			}
 		},
-		onOpen() {
+		afterShow() {
 			const picker = this.$refs.picker
+			const input = picker.$refs.search.$el.querySelector('input')
 
-			// 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()
+			if (input) {
+				input.focus()
+			}
 
 		},
 		handleKeydown(e) {
@@ -289,9 +288,14 @@ export default {
 		font-size: inherit;
 		height: 36px;
 		width: auto;
+
 		* {
 			cursor: pointer !important;
 		}
+
+		&:focus {
+			outline: 1px solid var(--color-primary) !important;
+		}
 	}
 
 	.emoji-mart-bar,
@@ -319,9 +323,6 @@ export default {
 			border-radius: 0;
 			padding: 12px 4px;
 			height: auto;
-			.emoji-mart-anchor-selected{
-				bottom: 0;
-			}
 		}
 	}
 
@@ -347,13 +348,12 @@ export default {
 			// 8 emoji per row
 			flex-basis: calc(100% / 8);
 			text-align: center;
-			&:hover::before {
-				background-color: red;
+
+			&:hover::before,
+			&.emoji-mart-emoji-selected::before {
+				background-color: var(--color-background-hover);
 			}
 		}
-		.emoji-mart-emoji-selected{
-			background-color: red;
-		}
 	}
 
 }