Reactive state in textfield not working

[wansidqi]

hi, I try to playaround for reactive state in TextField. when I try to put any text, it didn't reflect. I assume could be reactive issue? I try to run this by using perry run and perry dev. below is my code:

import { App, Button, ForEach, HStack, setCornerRadius, State, stateBindTextfield, stateOnChange, Text, TextField, textSetFontWeight, VStack, widgetSetBackgroundColor } from 'perry/ui';

function main(): void {


    const widgetStyleButton = Button("widget style button", () => console.log('click'))
    widgetSetBackgroundColor(widgetStyleButton, 9 / 255, 241 / 255, 180 / 255, 0.8);

    const bold = Text("Bold")
    setCornerRadius(widgetStyleButton, 8);
    textSetFontWeight(bold, 20, 1.0)

    const text = State("")

    const field = TextField("Type something", (value) => {
        text.set(value)
    })

    stateBindTextfield(text, field)

    const inlineStyleButton = Button("set hello world", () => {
        text.set("Hello, World!")
    })
    widgetSetBackgroundColor(inlineStyleButton, 245 / 255, 40 / 255, 145 / 255, 0.8);




    App({
        title: "Layout Demo",
        width: 400,
        height: 700,
        body: VStack(16, [
            Text("Header"),
            HStack(8, [widgetStyleButton]),
            HStack(12, [field,]),
            HStack(8, [bold, inlineStyleButton]),
            // Text(text.value),
            Text(`current state for text: ${text.value}`),
            Text("Footer"),
        ]),
    })
}

main();

and here is the info for my perry:

Environment Checks
──────────────────
[OK] perry version: 0.5.858
[OK] update status: up to date
[OK] clang (LLVM codegen): clang version 22.1.4 (https://github.com/llvm/llvm-project 35990504507d79e0b9deb809c8ee5e1b34ceef20)
[OK] system linker (lld-link + xwin sysroot): C:\Program Files\LLVM\bin\lld-link.exe + C:\Users\wanah\AppData\Local\perry\windows-sdk
[OK] runtime library: C:\coding\perry\crates\perry../../target/release\perry_runtime.lib
[OK] project config (perry.toml): found

and here is my repo:
https://github.com/wansidqi/perry-playground

[proggeramlug]

Hey @wansidqi — thanks for the clear repro. You've hit a real gap in Perry's UI reactivity, not a bug in your code.

What's happening

The problematic line is:

Text(`current state for text: ${text.value}`)

text.value is read once at construction time (returns "") and the resulting string is baked into the Text widget. Subsequent text.set(...) calls update the state cell, and your stateBindTextfield(text, field) correctly two-way-binds the input — but the standalone Text does not re-render, because nothing subscribed it to the state cell.

Internally, Perry's runtime already has a perry_ui_state_bind_text_template primitive for exactly this use case, but the compile-time pass that auto-rewrites Text(\...${state.value}...`)` into a call to it isn't wired up yet. I just filed #764 to track that — the goal is to make your original snippet "just work."

Workaround for now

Use stateOnChange + textSetString to push state changes into the label manually:

import {
  App, Button, HStack, State, stateBindTextfield, stateOnChange,
  Text, TextField, textSetString, VStack, widgetSetBackgroundColor,
  setCornerRadius, textSetFontWeight,
} from 'perry/ui';

function main(): void {
  const widgetStyleButton = Button("widget style button", () => console.log('click'));
  widgetSetBackgroundColor(widgetStyleButton, 9 / 255, 241 / 255, 180 / 255, 0.8);
  setCornerRadius(widgetStyleButton, 8);

  const bold = Text("Bold");
  textSetFontWeight(bold, 20, 1.0);

  const text = State("");

  const field = TextField("Type something", (value) => text.set(value));
  stateBindTextfield(text, field);

  const inlineStyleButton = Button("set hello world", () => text.set("Hello, World!"));
  widgetSetBackgroundColor(inlineStyleButton, 245 / 255, 40 / 255, 145 / 255, 0.8);

  // Reactive label: re-render whenever `text` changes.
  const stateLabel = Text("current state for text: ");
  stateOnChange(text, (v) => {
    textSetString(stateLabel, `current state for text: ${v}`);
  });

  App({
    title: "Layout Demo",
    width: 400,
    height: 700,
    body: VStack(16, [
      Text("Header"),
      HStack(8, [widgetStyleButton]),
      HStack(12, [field]),
      HStack(8, [bold, inlineStyleButton]),
      stateLabel,
      Text("Footer"),
    ]),
  });
}

main();

That gives you a label that updates live as you type and also when the button fires text.set("Hello, World!").

Tracking the real fix in #764.