fix(Select): render to the latest state before transition (#1916)

kricsleo · web-flow · commit 483cd743ffaa · 2025-07-01T15:36:22.000+08:00
* fix(Select): render to the latest state before transition

* refactor: more robust render

* fix: delay removing select options to avoid flash
diff --git a/packages/core/src/Select/SelectContent.vue b/packages/core/src/Select/SelectContent.vue
@@ -3,6 +3,7 @@ import type {
   SelectContentImplEmits,
   SelectContentImplProps,
 } from './SelectContentImpl.vue'
+import { computed, onMounted, ref, watch } from 'vue'
 
 export type SelectContentEmits = SelectContentImplEmits
 
@@ -16,7 +17,6 @@ export interface SelectContentProps extends SelectContentImplProps {
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
 import { Presence } from '@/Presence'
 import { useForwardPropsEmits } from '@/shared'
 import SelectContentImpl from './SelectContentImpl.vue'
@@ -40,21 +40,33 @@ onMounted(() => {
 })
 
 const presenceRef = ref<InstanceType<typeof Presence>>()
-const renderPresence = computed(() => props.forceMount || rootContext.open.value)
+
+const present = computed(() => props.forceMount || rootContext.open.value)
+const renderPresence = ref(present.value)
+
+watch(present, () => {
+  // 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)
+})
 </script>
 
 <template>
   <Presence
-    v-if="renderPresence"
+    v-if="present || renderPresence || presenceRef?.present"
     ref="presenceRef"
-    :present="true"
+    :present="present"
   >
     <SelectContentImpl v-bind="{ ...forwarded, ...$attrs }">
       <slot />
     </SelectContentImpl>
   </Presence>
 
-  <div v-else-if="!presenceRef?.present && fragment">
+  <div v-else-if="fragment">
     <Teleport :to="fragment">
       <SelectProvider :context="rootContext">
         <slot />
diff --git a/packages/core/src/Select/SelectItemText.vue b/packages/core/src/Select/SelectItemText.vue
@@ -7,7 +7,7 @@ export interface SelectItemTextProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted } from 'vue'
+import { computed, onMounted, onUnmounted } from 'vue'
 import { Primitive } from '@/Primitive'
 import { injectSelectContentContext } from './SelectContentImpl.vue'
 import { injectSelectItemContext } from './SelectItem.vue'
@@ -46,7 +46,7 @@ onMounted(() => {
   rootContext.onOptionAdd(optionProps.value)
 })
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   rootContext.onOptionRemove(optionProps.value)
 })
 </script>
