Close global search menu when focus leaves

Signed-off-by: Christopher Ng <[email protected]>

Author: Pytal

core/src/components/HeaderMenu.vue

@@ -36,7 +36,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>
@@ -161,6 +162,12 @@ export default {
 				this.$emit('update:open', false)
 			}
 		},
+
+		handleFocusOut(event) {
+			if (!event.currentTarget.contains(event.relatedTarget)) {
+				this.closeMenu()
+			}
+		},
 	},
 }
 </script>

core/src/views/UnifiedSearch.vue

@@ -73,7 +73,11 @@
 				</form>
 
 				<!-- Search filters -->
-				<NcActions v-if="availableFilters.length > 1" class="unified-search__filters" placement="bottom">
+				<NcActions v-if="availableFilters.length > 1"
+					class="unified-search__filters"
+					placement="bottom"
+					container=".unified-search__input-wrapper">
+					<!-- FIXME use element ref for container after https://github.com/nextcloud/nextcloud-vue/pull/3462 -->
 					<NcActionButton v-for="type in availableFilters"
 						:key="type"
 						icon="icon-filter"