Skip to content

Commit

Permalink
Close menu when focus leaves
Browse files Browse the repository at this point in the history
Signed-off-by: Christopher Ng <[email protected]>
  • Loading branch information
Pytal committed Nov 15, 2022
1 parent 79b5d68 commit 6ecfbce
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 1 deletion.
9 changes: 8 additions & 1 deletion src/Components/HeaderMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -157,6 +158,12 @@ export default {
this.$emit('update:open', false)
}
},

handleFocusOut(event) {
if (!event.currentTarget.contains(event.relatedTarget)) {
this.closeMenu()
}
},
},
}
</script>
Expand Down
6 changes: 6 additions & 0 deletions src/NotificationsApp.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

0 comments on commit 6ecfbce

Please sign in to comment.