From 1af3269adb1bceea4e8d362ed5e55438f081ece8 Mon Sep 17 00:00:00 2001
From: "chihao.ou" <ou727963665@gmail.com>
Date: Tue, 22 Sep 2026 21:43:13 +0800
Subject: [PATCH] fix(groups): clean up modal listeners and pending searches

---
 .../admin/group/GroupRPMOverridesModal.vue    |  6 +++-
 .../admin/group/GroupRateMultipliersModal.vue |  6 +++-
 .../__tests__/GroupModal.cleanup.spec.ts      | 30 +++++++++++++++++++
 3 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/admin/group/__tests__/GroupModal.cleanup.spec.ts

diff --git a/frontend/src/components/admin/group/GroupRPMOverridesModal.vue b/frontend/src/components/admin/group/GroupRPMOverridesModal.vue
index 025054162f..4398780143 100644
--- a/frontend/src/components/admin/group/GroupRPMOverridesModal.vue
+++ b/frontend/src/components/admin/group/GroupRPMOverridesModal.vue
@@ -206,7 +206,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'
@@ -420,6 +420,10 @@ const handleClickOutside = () => { showDropdown.value = false }
 if (typeof document !== 'undefined') {
   document.addEventListener('click', handleClickOutside)
 }
+onUnmounted(() => {
+  clearTimeout(searchTimeout)
+  document.removeEventListener('click', handleClickOutside)
+})
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/admin/group/GroupRateMultipliersModal.vue b/frontend/src/components/admin/group/GroupRateMultipliersModal.vue
index f35d47943d..ccfcf546e0 100644
--- a/frontend/src/components/admin/group/GroupRateMultipliersModal.vue
+++ b/frontend/src/components/admin/group/GroupRateMultipliersModal.vue
@@ -239,7 +239,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'
@@ -490,6 +490,10 @@ const handleClickOutside = () => {
 if (typeof document !== 'undefined') {
   document.addEventListener('click', handleClickOutside)
 }
+onUnmounted(() => {
+  clearTimeout(searchTimeout)
+  document.removeEventListener('click', handleClickOutside)
+})
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/admin/group/__tests__/GroupModal.cleanup.spec.ts b/frontend/src/components/admin/group/__tests__/GroupModal.cleanup.spec.ts
new file mode 100644
index 0000000000..d15858704e
--- /dev/null
+++ b/frontend/src/components/admin/group/__tests__/GroupModal.cleanup.spec.ts
@@ -0,0 +1,30 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import GroupRPMOverridesModal from '../GroupRPMOverridesModal.vue'
+import GroupRateMultipliersModal from '../GroupRateMultipliersModal.vue'
+import type { AdminGroup } from '@/types'
+const mocks = vi.hoisted(() => ({ list: vi.fn().mockResolvedValue({ items: [] }), getGroupRPMOverrides: vi.fn().mockResolvedValue([]), getGroupRateMultipliers: vi.fn().mockResolvedValue([]) }))
+vi.mock('@/api/admin', () => ({ adminAPI: { users: mocks, groups: mocks } }))
+vi.mock('@/stores/app', () => ({ useAppStore: () => ({ showError: vi.fn() }) }))
+vi.mock('vue-i18n', () => ({ useI18n: () => ({ t: (key: string) => key }) }))
+beforeEach(() => { vi.clearAllMocks(); vi.useFakeTimers() })
+afterEach(() => { vi.restoreAllMocks(); vi.useRealTimers() })
+describe.each([GroupRPMOverridesModal, GroupRateMultipliersModal])('group modal lifecycle', (component) => {
+  function open() {
+    return mount(component, { props: { show: true, group: { id: 1, name: 'Group', platform: 'openai' } as AdminGroup },
+      global: { stubs: { BaseDialog: { template: '<div><slot /></div>' }, Icon: true, PlatformIcon: true, Pagination: true } } })
+  }
+  it('removes its document click listener on unmount', () => {
+    const add = vi.spyOn(document, 'addEventListener'); const remove = vi.spyOn(document, 'removeEventListener')
+    const w = open()
+    const handlers = add.mock.calls.filter(([event]) => event === 'click').map(([, handler]) => handler)
+    expect(handlers.length).toBeGreaterThan(0)
+    w.unmount()
+    for (const handler of handlers) expect(remove).toHaveBeenCalledWith('click', handler)
+  })
+  it('cancels a queued search when navigating away', async () => {
+    const w = open(); await w.get('input[type="text"]').setValue('alice')
+    w.unmount(); await vi.advanceTimersByTimeAsync(300); await flushPromises()
+    expect(mocks.list).not.toHaveBeenCalled()
+  })
+})