Cannot change value of textbox

[mtanco]

Using the location selection I can change attributes of items, but specifically textbox value cannot be updated. textbox label works as expected. Is this expected?

MRE:

from h2o_wave import main, app, Q, ui


@app('/')
async def serve(q: Q):

    if not q.client.initialized:
        q.page['meta'] = ui.meta_card(box='', script=ui.inline_script(
            # Handle and transmit event
            'window.onclick = (e) => wave.emit("window", "clicked", { x: e.clientX, y: e.clientY });'
        ))
        q.page["card"] = ui.form_card(
            box="4 4 4 4",
            items=[
                ui.textbox(name="x_value", label="X Value of Click: ", value="temp"),
                ui.textbox(name="y_value", label="Y Value of Click: ", value="temp")
            ]
        )
        q.client.initialized = True

    elif q.events.window.clicked is not None:
        click = q.events.window.clicked
        print(click)

        q.page["card"].items[0].textbox.label = "I was clicked"
        q.page["card"].items[0].textbox.value = "I was clicked"

    await q.page.save()

[mturoci]

Hi @mtanco, yes. The value is from now on considered an initial value only and no longer can be manually controlled via python.

[mtanco]

Is there documentation on what and why some features cannot be changed? I did some brief looking in the docs / recent blogs but not seeing it. Thanks!

[mturoci]

Good point, will be included in #726, probably within general form docs section. The value prop is the only attr that kind of cannot be changed. It can be changed if you also change the name prop. In this way, the component on the ui will not get updated, but recreated as before.

More explanation:
There are basically 2 ways of dealing with this, in UI world, this is called controlled and uncontrolled components.

Controlled components intercept value changes and then update the value manually. This is handly if you want to e.g. validate / format value before display. In terms of Wave, you can think of this as trigger that always have to return some value. The reason why we cannot really do this in Wave is because every single keystroke (can be sidestepped via debouncing but still) would have to go to Wave server first, then value would be retrieved and set on client. This can however take some time depending on network speed and can result in laggy typing, which is awful UX.

Uncontrolled components - specify initial value and let browser update the input. This is what we went for. Note that for formatting you can use prefix / suffix / mask and for validation, you can still display an error message via error. This should cover most of the usecases. Feel free to ping us if you stumble upon something else.