fix(Select): clean up delayed presence update (#2638)

yan-ad · web-flow · commit 0e80c371f416 · 2026-05-22T16:52:59.000+08:00
diff --git a/packages/core/src/Select/Select.test.ts b/packages/core/src/Select/Select.test.ts
@@ -1,10 +1,11 @@
 import type { DOMWrapper, VueWrapper } from '@vue/test-utils'
 import { fireEvent } from '@testing-library/vue'
 import { mount } from '@vue/test-utils'
-import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { axe } from 'vitest-axe'
 import { nextTick } from 'vue'
 import { handleSubmit } from '@/test'
+import SelectUnmountCleanup from './__test__/SelectUnmountCleanup.vue'
 import Select from './story/_SelectTest.vue'
 
 beforeAll(() => {
@@ -251,6 +252,35 @@ describe('given Select with object type', async () => {
   })
 })
 
+describe('given SelectContent cleanup', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should clear delayed presence updates when unmounted after closing', async () => {
+    const clearTimeoutSpy = vi.spyOn(window, 'clearTimeout')
+    const wrapper = mount(SelectUnmountCleanup, { attachTo: document.body })
+
+    await nextTick()
+    await wrapper.find('button').trigger('click')
+    await nextTick()
+
+    const timerCountAfterClose = vi.getTimerCount()
+    expect(timerCountAfterClose).toBeGreaterThan(0)
+
+    await wrapper.findAll('button')[1].trigger('click')
+    await nextTick()
+
+    expect(clearTimeoutSpy).toHaveBeenCalled()
+    expect(vi.getTimerCount()).toBeLessThan(timerCountAfterClose)
+  })
+})
+
 describe('given Select in a form', async () => {
   const wrapper = mount({
     props: ['handleSubmit'],
diff --git a/packages/core/src/Select/SelectContent.vue b/packages/core/src/Select/SelectContent.vue
@@ -3,7 +3,7 @@ import type {
   SelectContentImplEmits,
   SelectContentImplProps,
 } from './SelectContentImpl.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 export type SelectContentEmits = SelectContentImplEmits
 
@@ -44,15 +44,31 @@ const presenceRef = ref<InstanceType<typeof Presence>>()
 const present = computed(() => props.forceMount || rootContext.open.value)
 const renderPresence = ref(present.value)
 
-watch(present, () => {
+let renderPresenceTimeout: ReturnType<typeof setTimeout> | undefined
+
+function clearRenderPresenceTimeout() {
+  if (renderPresenceTimeout) {
+    clearTimeout(renderPresenceTimeout)
+    renderPresenceTimeout = undefined
+  }
+}
+
+watch(present, (_value, _oldValue, onCleanup) => {
   // Toggle render presence after a delay (nextTick is not enough)
   // to allow children to re-render with the latest state.
   // Otherwise, they would remain in the old state during the transition,
   // which would prevent the animation that depend on state (e.g., data-[state=closed])
   // from being applied accurately.
   // @see https://github.com/unovue/reka-ui/issues/1865
-  setTimeout(() => renderPresence.value = present.value)
+  clearRenderPresenceTimeout()
+  renderPresenceTimeout = setTimeout(() => {
+    renderPresence.value = present.value
+    renderPresenceTimeout = undefined
+  })
+  onCleanup(clearRenderPresenceTimeout)
 })
+
+onUnmounted(clearRenderPresenceTimeout)
 </script>
 
 <template>
diff --git a/packages/core/src/Select/__test__/SelectUnmountCleanup.vue b/packages/core/src/Select/__test__/SelectUnmountCleanup.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from '..'
+
+const open = ref(true)
+const mounted = ref(true)
+</script>
+
+<template>
+  <button @click="open = false">
+    Close
+  </button>
+  <button @click="mounted = false">
+    Unmount
+  </button>
+
+  <SelectRoot
+    v-if="mounted"
+    v-model:open="open"
+  >
+    <SelectTrigger aria-label="Fruit">
+      <SelectValue placeholder="Please select a fruit" />
+    </SelectTrigger>
+    <SelectPortal>
+      <SelectContent position="popper">
+        <SelectViewport>
+          <SelectItem value="apple">
+            <SelectItemText>Apple</SelectItemText>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>
