feat: deactivate alongside keep-alive

__tests__/KeepAlive.spec.ts

@@ -0,0 +1,36 @@
+import { GlobalEventsImpl as GlobalEvents } from '../src/GlobalEvents'
+import { mount } from '@vue/test-utils'
+import { defineComponent, KeepAlive, nextTick } from 'vue'
+
+const TestWrapper = (name: string, fn: Function) =>
+  defineComponent({
+    template: `
+<keep-alive>
+  <GlobalEvents :${name}="fn" v-if="active" />
+</keep-alive>
+  `,
+
+    components: { KeepAlive, GlobalEvents },
+    data: () => ({ active: true }),
+    methods: { fn },
+  })
+
+describe('GlobalEvents with KeepAlive', () => {
+  test('skips events when deactivated', async () => {
+    const onKeydown = jest.fn()
+    const wrapper = mount(TestWrapper('onKeydown', onKeydown))
+
+    wrapper.vm.active = false
+    await nextTick()
+
+    document.dispatchEvent(new Event('keydown'))
+    expect(onKeydown).not.toHaveBeenCalled()
+
+    wrapper.vm.active = true
+    await nextTick()
+
+    expect(onKeydown).not.toHaveBeenCalled()
+    document.dispatchEvent(new Event('keydown'))
+    expect(onKeydown).toHaveBeenCalledTimes(1)
+  })
+})

src/GlobalEvents.ts

@@ -4,6 +4,9 @@ import {
   VNodeProps,
   onMounted,
   onBeforeUnmount,
+  ref,
+  onActivated,
+  onDeactivated,
 } from 'vue'
 import { isIE } from './isIE'
 
@@ -67,6 +70,14 @@ export const GlobalEventsImpl = defineComponent({
       [EventListener[], string, Options | undefined | boolean]
     > = Object.create(null)
 
+    const isActive = ref(true)
+    onActivated(() => {
+      isActive.value = true
+    })
+    onDeactivated(() => {
+      isActive.value = false
+    })
+
     onMounted(() => {
       Object.keys(attrs)
         .filter((name) => name.startsWith('on'))
@@ -91,7 +102,9 @@ export const GlobalEventsImpl = defineComponent({
 
           const handlers: EventListener[] = listeners.map(
             (listener) => (event) => {
-              props.filter(event, listener, eventName) && listener(event)
+              isActive.value &&
+                props.filter(event, listener, eventName) &&
+                listener(event)
             }
           )