From 79a6558f77e79adf5a78edfdf4cb8ccde9aeb787 Mon Sep 17 00:00:00 2001
From: Vanessa Pertsch <vanessa.pertsch@nextcloud.com>
Date: Thu, 24 Mar 2022 16:29:58 +0100
Subject: [PATCH] add focus trapp

---
 src/components/EmojiPicker/EmojiPicker.vue | 31 ++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/components/EmojiPicker/EmojiPicker.vue b/src/components/EmojiPicker/EmojiPicker.vue
index 38d76327ff..83570729ae 100644
--- a/src/components/EmojiPicker/EmojiPicker.vue
+++ b/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>