Controlled Field does not update Form's field value if the controlled value is updated manually

[lsi-encircle]

Description

When I update the controlled input value manually, I expect the field value of the Form to be updated as well. However, the field value is not updated.

Link to Reproduction

No response

Steps to reproduce

import { Button, Checkbox } from "@chakra-ui/react";
import { Field, Form, FormLayout } from "@saas-ui/react";
import React from "react";

function TestComponent() {
    const [inputValue, setInputValue] = React.useState("");
    const [showInput, setShowInput] = React.useState<boolean>(false);

    return (
        <Form onSubmit={() => {}}>
            {({ getValues }) => {
                return (
                    <FormLayout>
                        <Checkbox onChange={(e) => setShowInput(e.target.checked)}>{"Other:"}</Checkbox>
                        { showInput && (
                            <Field
                                type="text"
                                name="otherText"
                                value={inputValue}
                                onChange={(e) => setInputValue(e.target.value)}
                            />
                        )}
                        <Button type="button" onClick={() => { setInputValue("") }}>{"Clear"}</Button>
                        <Button type="button" onClick={() => {
                            console.log(inputValue)
                            console.log(getValues("otherText"))
                        }}>{"Print"}</Button>
                    </FormLayout>
                );
            }}
        </Form>
    );
}

With the component above:

1. Click the checkbox to reveal the text input.
2. Enter some text, e.g. "abcdef".
3. Click the Clear button, which empties the text input.
4. Click the checkbox again to hide the text input.
5. Click the checkbox again again to reveal the text input.
6. The text input has value "abcdef", instead of an empty input.

Clicking the Print button after step 3 would log `` and abcdef.

Saas UI Version

2.11.4

Chakra UI Version

2.10.7

Browser

Google Chrome 143.0.7499.41

Operating System

• macOS
• Windows
• Linux

Additional Information

If the help property is defined for Field, i.e.

<Field
    type="text"
    name="otherText"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
    help="I am here to help"
/>

the input will be empty as expected on step 6. However, Print still log two different values.

[linear]

SUI-703

[Pagebakers]

If you do this the state is not synced automatically, you'd need to run setValue(fieldname, value) (it's a prop of the render f unction of the form) in the onChange handler to keep the form state in sync.