From 8167d85b32480de46fd140dc91b1c7d35742c6a1 Mon Sep 17 00:00:00 2001
From: "chihao.ou" <ou727963665@gmail.com>
Date: Wed, 30 Sep 2026 02:46:31 +0800
Subject: [PATCH] fix(ui): close selectors when they become disabled

---
 .../src/components/common/ProxySelector.vue   |  9 ++++-
 frontend/src/components/common/Select.vue     |  4 ++
 .../__tests__/disabledSelectors.spec.ts       | 38 +++++++++++++++++++
 3 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/common/__tests__/disabledSelectors.spec.ts

diff --git a/frontend/src/components/common/ProxySelector.vue b/frontend/src/components/common/ProxySelector.vue
index 986609b35b..a441d6ceea 100644
--- a/frontend/src/components/common/ProxySelector.vue
+++ b/frontend/src/components/common/ProxySelector.vue
@@ -168,7 +168,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { adminAPI } from '@/api/admin'
 import Icon from '@/components/icons/Icon.vue'
@@ -245,6 +245,13 @@ const toggle = () => {
   }
 }
 
+watch(() => props.disabled, (disabled) => {
+  if (disabled) {
+    isOpen.value = false
+    searchQuery.value = ''
+  }
+})
+
 const selectOption = (value: number | null) => {
   emit('update:modelValue', value)
   isOpen.value = false
diff --git a/frontend/src/components/common/Select.vue b/frontend/src/components/common/Select.vue
index 4c55377708..c062bd4fdc 100644
--- a/frontend/src/components/common/Select.vue
+++ b/frontend/src/components/common/Select.vue
@@ -375,6 +375,10 @@ const toggle = () => {
   isOpen.value = !isOpen.value
 }
 
+watch(() => props.disabled, (disabled) => {
+  if (disabled) isOpen.value = false
+})
+
 watch(isOpen, (open) => {
   if (open) {
     calculateDropdownPosition()
diff --git a/frontend/src/components/common/__tests__/disabledSelectors.spec.ts b/frontend/src/components/common/__tests__/disabledSelectors.spec.ts
new file mode 100644
index 0000000000..a19a58edbc
--- /dev/null
+++ b/frontend/src/components/common/__tests__/disabledSelectors.spec.ts
@@ -0,0 +1,38 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import Select from '../Select.vue'
+import ProxySelector from '../ProxySelector.vue'
+import type { Proxy } from '@/types'
+
+vi.mock('vue-i18n', () => ({ useI18n: () => ({ t: (key: string) => key }) }))
+vi.mock('@/api/admin', () => ({ adminAPI: { proxies: { testProxy: vi.fn() } } }))
+enableAutoUnmount(afterEach)
+
+describe('selectors disabled while open', () => {
+  it('closes an open Select and can reopen when enabled again', async () => {
+    const wrapper = mount(Select, {
+      props: { modelValue: 1, options: [{ value: 1, label: 'One' }, { value: 2, label: 'Two' }] },
+      global: { stubs: { Teleport: true, Transition: true } },
+    })
+    await wrapper.get('.select-trigger').trigger('click')
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(true)
+    await wrapper.setProps({ disabled: true })
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    await wrapper.setProps({ disabled: false })
+    await wrapper.get('.select-trigger').trigger('click')
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(true)
+  })
+
+  it('closes an open proxy picker when the account form becomes disabled', async () => {
+    const wrapper = mount(ProxySelector, {
+      props: { modelValue: null, proxies: [{ id: 1, name: 'Proxy', host: 'localhost', port: 8080, protocol: 'http' } as Proxy] },
+      global: { stubs: { Transition: true } },
+    })
+    await wrapper.get('.select-trigger').trigger('click')
+    expect(wrapper.find('.select-dropdown').exists()).toBe(true)
+    await wrapper.setProps({ disabled: true })
+    expect(wrapper.find('.select-dropdown').exists()).toBe(false)
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+})