pc.form inputs don't clear until all on_submit functions complete

[simonmesmith]

I'm really happy we can now submit with the "enter" key, but have a small issue. I'm hoping that I'm just implementing this incorrectly.

I'm creating a chat with an LLM backend.

My form looks like this:

pc.form(
            pc.hstack(
                pc.input(
                    id="new_user_message",
                    placeholder="Enter message",
                    bg="white",
                ),
                pc.button("Submit", type_="submit", bg="white"),
                width="100%",
            ),
            on_submit=[state.add_user_message, state.add_assistant_message],
            width="100%",
        ),
        width="100%",

My State class looks like this:

class State(pc.State):
    """The app state."""

    messages: list[Message] = [
        Message(
            role="system",
            content="System message goes here.",
        ),
    ]
    new_user_message: str
    answer_loaded: bool = True

    def add_user_message(self, form_data: dict[str, str]):
        """Add a new message."""
        message = Message(role="user", content=form_data["new_user_message"])
        self.messages.append(message)
        self.answer_loaded = False
        return pc.set_value("new_user_message", "")

    def add_assistant_message(self):
        """Add a new assistant message."""
        llm.answer(self.messages)
        self.answer_loaded = True

When a user submits the form, the expected behavior is that it clears the input fields, then calls the LLM.

Instead, the inputs still contain the contents the user submitted until the add_assistant_message() function has completed.

Ideally, I'd love to:

1. Clear the form
2. Disable the input field until the LLM has responded
3. Have the LLM respond
4. Reenable the form

Not sure what's possible.

Again, maybe I'm implementing this incorrectly.

[ESchwaa919]

there is a good example of how to solve for this in the tutorial. But effectively you need to create a state variable that maps to your input form, and in the button event handler, clear that variable by setting it to an empty string. That will then clear your input box.

[masenf]

Probably could fix this by moving the following line to before the on_submit_event_chain:

https://github.com/reflex-dev/reflex/blob/main/reflex/components/el/elements/forms.py#L30