add focus trapp

src/components/EmojiPicker/EmojiPicker.vue

@@ -222,11 +222,42 @@ export default {
 			const picker = this.$refs.picker
 			const input = picker.$refs.search.$el.querySelector('input')
 
+			// add focus trap in modal
+			picker.$el.addEventListener('keydown', this.checkKeyEvent)
+
 			if (input) {
 				input.focus()
 			}
 
 		},
+		checkKeyEvent(event) {
+			const picker = this.$refs.picker
+
+			const focusableList = picker.$el.querySelectorAll(
+				'button, input'
+			)
+			// escape early if only 1 or no elements to focus
+			if (focusableList.length < 2 && event.key === 'Tab') {
+				event.preventDefault()
+				return
+			}
+			const last = focusableList.length - 1
+			if (
+				event.key === 'Tab'
+				&& event.shiftKey === false
+				&& event.target === focusableList[last]
+			) {
+				event.preventDefault()
+				focusableList[0].focus()
+			} else if (
+				event.key === 'Tab'
+				&& event.shiftKey === true
+				&& event.target === focusableList[0]
+			) {
+				event.preventDefault()
+				focusableList[last].focus()
+			}
+		},
 	},
 }
 </script>