diff --git a/.changeset/stale-showers-wave.md b/.changeset/stale-showers-wave.md new file mode 100644 index 000000000..18c56703e --- /dev/null +++ b/.changeset/stale-showers-wave.md @@ -0,0 +1,5 @@ +--- +"@effect-app/vue-components": patch +--- + +fix: ensure nextTick is used for state change handling in OmegaTaggedUnionInternal diff --git a/packages/vue-components/src/components/OmegaForm/OmegaTaggedUnionInternal.vue b/packages/vue-components/src/components/OmegaForm/OmegaTaggedUnionInternal.vue index bd6465135..30a2c8553 100644 --- a/packages/vue-components/src/components/OmegaForm/OmegaTaggedUnionInternal.vue +++ b/packages/vue-components/src/components/OmegaForm/OmegaTaggedUnionInternal.vue @@ -12,7 +12,7 @@ generic="From extends Record, To extends Record, Name extends DeepKeys" > import { type DeepKeys, type DeepValue } from "@tanstack/vue-form" -import { watch } from "vue" +import { nextTick, watch } from "vue" import { type OmegaFieldInternalApi } from "./InputProps" import { type useOmegaForm } from "./useOmegaForm" @@ -23,8 +23,6 @@ const props = defineProps<{ form: ReturnType> }>() -const values = props.form.useStore(({ values }) => values) - // Watch for _tag changes watch(() => props.state, (newTag, oldTag) => { if (newTag === null) { @@ -32,18 +30,20 @@ watch(() => props.state, (newTag, oldTag) => { } if (newTag !== oldTag && newTag) { - // Get default values for the new tag to ensure correct types - const tagDefaults = (props.form as any).unionDefaultValues?.[newTag as string] ?? {} - // Merge: keep _tag from current values, but use tag defaults for other fields - const resetValues = { - ...tagDefaults, - _tag: newTag - } - props.form.reset(resetValues as any) - setTimeout(() => { - props.field.validate("change") - }, 0) + // Use nextTick to avoid cleanup conflicts during reactive updates + nextTick(() => { + // Get default values for the new tag to ensure correct types + const tagDefaults = (props.form as any).unionDefaultValues?.[newTag as string] ?? {} + // Merge: keep _tag from current values, but use tag defaults for other fields + const resetValues = { + ...tagDefaults, + _tag: newTag + } + props.form.reset(resetValues as any) + setTimeout(() => { + props.field.validate("change") + }, 0) + }) } - return undefined }, { immediate: true })