From 4e24c99b08349a5cce3ea42f64a7df3e9445f8fe Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Fri, 12 Jan 2024 16:09:50 -0800
Subject: [PATCH] enh(NcHeaderMenu): Close navigation header menu on focusout

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 src/components/NcHeaderMenu/NcHeaderMenu.vue | 24 ++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue
index 2329125698..b542c890e6 100644
--- a/src/components/NcHeaderMenu/NcHeaderMenu.vue
+++ b/src/components/NcHeaderMenu/NcHeaderMenu.vue
@@ -66,10 +66,12 @@ export default {
 <template>
 	<component :is="wrapperTag"
 		:id="id"
+		ref="headerMenu"
 		v-click-outside="clickOutsideConfig"
 		:aria-labelledby="isNav ? triggerId : null"
 		:class="{ 'header-menu--opened': opened }"
-		class="header-menu">
+		class="header-menu"
+		v-on="listeners">
 		<!-- Trigger -->
 		<button :id="isNav ? triggerId : null"
 			ref="trigger"
@@ -200,6 +202,15 @@ export default {
 				this.clickOutsideOptions,
 			]
 		},
+
+		listeners() {
+			if (this.isNav) {
+				return {
+					focusout: this.onFocusOut,
+				}
+			}
+			return null
+		},
 	},
 
 	watch: {
@@ -282,13 +293,22 @@ export default {
 			}
 		},
 
+		/**
+		 * @param {FocusEvent} event The focus event
+		 */
+		onFocusOut(event) {
+			if (!this.$refs.headerMenu.contains(event.relatedTarget)) {
+				this.closeMenu()
+			}
+		},
+
 		/**
 		 * Add focus trap for accessibility.
 		 * Shall only be used when all children are mounted
 		 * and available in the DOM. We use $nextTick for that.
 		 */
 		async useFocusTrap() {
-			if (this.focusTrap) {
+			if (this.isNav || this.focusTrap) {
 				return
 			}
 			// Init focus trap