From 6ecfbcea7c8cf108abe19792c22766563845bdf7 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Tue, 15 Nov 2022 03:33:41 +0000
Subject: [PATCH] Close menu when focus leaves

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 src/Components/HeaderMenu.vue | 9 ++++++++-
 src/NotificationsApp.vue      | 6 ++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/Components/HeaderMenu.vue b/src/Components/HeaderMenu.vue
index 6cb1243b..2358d60f 100644
--- a/src/Components/HeaderMenu.vue
+++ b/src/Components/HeaderMenu.vue
@@ -37,7 +37,8 @@
 		<div v-show="opened"
 			:id="`header-menu-${id}`"
 			class="header-menu__wrapper"
-			role="menu">
+			role="menu"
+			@focusout="handleFocusOut">
 			<div class="header-menu__content">
 				<slot />
 			</div>
@@ -157,6 +158,12 @@ export default {
 				this.$emit('update:open', false)
 			}
 		},
+
+		handleFocusOut(event) {
+			if (!event.currentTarget.contains(event.relatedTarget)) {
+				this.closeMenu()
+			}
+		},
 	},
 }
 </script>
diff --git a/src/NotificationsApp.vue b/src/NotificationsApp.vue
index a1a9c486..7fc16889 100644
--- a/src/NotificationsApp.vue
+++ b/src/NotificationsApp.vue
@@ -248,8 +248,14 @@ export default {
 
 	methods: {
 		onOpen() {
+			this.focusFirstFocusable()
 			this.requestWebNotificationPermissions()
 		},
+
+		focusFirstFocusable() {
+			this.$el.querySelector('.button-vue').focus()
+		},
+
 		handleNetworkOffline() {
 			console.debug('Network is offline, slowing down pollingInterval to ' + this.pollIntervalBase * 10)
 			this._setPollingInterval(this.pollIntervalBase * 10)