Merge pull request #7725 from ouchihao/codex/bug-select-disabled-open

fix(ui): close selectors when they become disabled

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

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()

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()
+  })
+})