diff options
author | Christopher Ng <chrng8@gmail.com> | 2022-11-11 01:20:52 +0000 |
---|---|---|
committer | Vincent Petry <vincent@nextcloud.com> | 2022-11-17 11:51:41 +0100 |
commit | d7c4bdc46efabc8f588e2c4c54cb7c6643fa406e (patch) | |
tree | 6e6c196b6a46da7ae55cbcc8921d1ac4c3614821 /core | |
parent | f021172eab79b6e1adaa1950009dd6446f1ddb64 (diff) | |
download | nextcloud-server-d7c4bdc46efabc8f588e2c4c54cb7c6643fa406e.tar.gz nextcloud-server-d7c4bdc46efabc8f588e2c4c54cb7c6643fa406e.zip |
Close global search menu when focus leaves
Signed-off-by: Christopher Ng <chrng8@gmail.com>
Diffstat (limited to 'core')
-rw-r--r-- | core/src/components/HeaderMenu.vue | 9 | ||||
-rw-r--r-- | core/src/views/UnifiedSearch.vue | 6 |
2 files changed, 13 insertions, 2 deletions
diff --git a/core/src/components/HeaderMenu.vue b/core/src/components/HeaderMenu.vue index a2c19194b45..096294e3799 100644 --- a/core/src/components/HeaderMenu.vue +++ b/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> diff --git a/core/src/views/UnifiedSearch.vue b/core/src/views/UnifiedSearch.vue index 7811d1e497f..17bd3106e5e 100644 --- a/core/src/views/UnifiedSearch.vue +++ b/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" |