Skip to content

fix: restore OmegaForm input reactivity with @tanstack/vue-form 1.32#757

Merged
MakhBeth merged 2 commits into
mainfrom
fix/omega-input-reactivity-tanstack-1.32
May 18, 2026
Merged

fix: restore OmegaForm input reactivity with @tanstack/vue-form 1.32#757
MakhBeth merged 2 commits into
mainfrom
fix/omega-input-reactivity-tanstack-1.32

Conversation

@MakhBeth
Copy link
Copy Markdown
Contributor

Problem

After bumping @tanstack/vue-form from 1.23.5 to 1.32.0 (#755), typing in OmegaForm inputs no longer updates the view — the form store value changes, but the rendered input is frozen.

Repro: components-omegaform--simple-form story.

Root cause

@tanstack/vue-form inverted its Field slot reactivity between the two versions.

  • 1.23.5useField returned state as a ref, and Field unwrapped it inside its render function. The slot state prop was reactive; field.state was not.
  • 1.32.0useField returns state: fieldState.value, unwrapped once. The Field component passes that frozen snapshot as the slot state prop. Reactivity moved onto field.state, now a reactive getter.

OmegaForm bound inputs to the slot state prop (OmegaInput → OmegaInternalInput → OmegaInputVuetify, :model-value="state.value"). After the bump that prop is a static snapshot, so the view never re-renders.

The same #755 commit's OmegaTaggedUnion refactor (off inputProps.state.value onto currentTag from the form store) was half-addressing this — the input path was missed.

Fix

Switch the form.Field slot consumers from the dead state prop to the reactive field.state:

  • OmegaInput.vue:state="field.state" (drives all input types)
  • OmegaArray.vuepre-array / post-array / item slots forward field.state / subField.state
  • InputProps.ts — correct the now-inverted doc comment

Verification

  • New test InputReactivity.test.ts — fails before the fix (expected '' to be 'hello'), passes after.
  • Full suite: 172/172 pass across 35 files.
  • Storybook components-omegaform--simple-form: typing updates the view live.

🤖 Generated with Claude Code

@tanstack/vue-form inverted its Field slot reactivity between 1.23.5 and
1.32.0. The slot's `state` prop is now a one-time snapshot taken when the
field mounts, while `field.state` is a reactive getter backed by the field
store. OmegaForm bound inputs to the slot `state` prop, so the store
updated but the view never did.

Switch the Field slot consumers (OmegaInput, OmegaArray) to read from the
reactive `field.state` instead, and correct the now-inverted doc comment
in InputProps.ts.
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 18, 2026

Open in StackBlitz

@effect-app/cli

npm i https://pkg.pr.new/effect-app/libs/@effect-app/cli@757

effect-app

npm i https://pkg.pr.new/effect-app/libs/effect-app@757

@effect-app/eslint-codegen-model

npm i https://pkg.pr.new/effect-app/libs/@effect-app/eslint-codegen-model@757

@effect-app/eslint-shared-config

npm i https://pkg.pr.new/effect-app/libs/@effect-app/eslint-shared-config@757

@effect-app/infra

npm i https://pkg.pr.new/effect-app/libs/@effect-app/infra@757

@effect-app/vue

npm i https://pkg.pr.new/effect-app/libs/@effect-app/vue@757

@effect-app/vue-components

npm i https://pkg.pr.new/effect-app/libs/@effect-app/vue-components@757

commit: 0607ffe

@MakhBeth MakhBeth merged commit ed07e7a into main May 18, 2026
3 checks passed
@MakhBeth MakhBeth deleted the fix/omega-input-reactivity-tanstack-1.32 branch May 18, 2026 13:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant