Performance issues with input.on_change

[simonmesmith]

I'm not sure if this is an issue or I'm doing something wrong, so posting here before issues.

I'm building a chat interface. I have this state:

class State(pc.State):
  """The app state."""
  user_message: str = ""
  answer_loaded: bool = True
  messages: list[Message] = []

Then, in my form, I have this:

pc.input(
  value=State.user_message,
  on_change=State.user_message,
),
pc.button(
  "Send",
  on_click=[State.add_user_message, State.add_bot_message]
),

This works fine when there isn't a lot of message history, but as soon as it starts getting long it becomes exceedingly difficult to type in the input, I assume because there's some kind of memory issue related to saving the message with each key pressed.

Is there a way around this? I tried with on_blur, but then I couldn't clear the input after the user posted their message.

PS: Loving Pynecone. Just working through some of the differences with pure Python, HTML, and JS that I'm more used to.

[Alek99]

Thanks for this feedback, this is something I think we can find a solution for and will just take some work arounds on our end. Ideally uncontrolled events like on_blur should still be able to be cleared and manipulated.

I'm going to brainstorm this over the next day or so and see if I can find a solution that is purely under the hood so the user doesn't have to do anything special for this to work. This solution should enable the on_blur and other uncontrolled triggers to be cleared and manipulated based on state changes

[simonmesmith]

The issue seems to arise when there's a lot of text rendered in messages.

And I think it's related to the round trip: user types, we update user_message in state, and this in turn updates the value in the input field. So it seems to be a circular loop and the user has to wait for the value to be updated after they type it. Type in input -> update user_message in state -> update input's value field from state.

Ideally, we would only update user_message when needed, such as when the user clicks "send" or hits "enter." We don't need to track every change. We only need to capture the value from the input field when the user is ready to post something.

And then we need to clear the input field.

Let me know if you have any ideas. Really, all I want is a way to (1) capture the input text and then (2) clear the input field. And I want this to not be so laggy. Open to suggestions.

[simonmesmith]

Thanks!

Perhaps another option is to only set on_change after the user stops typing for a specified period of time.

Just using on_blur might not be sufficient. For example, what if a user clicks "enter" within an input box that hasn't lost focus? We'd still want to capture the latest text they typed.

[FHU-yezi]

Maybe called debounce_time? Put this argument in every component which has on_change event trigger, or let it be a config item in pcconfig.py?

[simonmesmith]

Maybe!

But I think the simplest solution is just being able to clear the input without having to bind its value attribute to a State variable.

The issue I'm having is that I have to set the user_message State variable from the input as the user types, then immediately return that string and bind it to the input field's value attribute so that after the user submits I can set the value to "" to clear the field.

If I didn't have to do that circular loop I think it would mostly solve this particularly problem. It's a totally unnecessary process for the most part since the input field will obviously already contain what the user typed. It's only necessary in my case to clear the input field, which would be dead easy with straight JavaScript or jQuery.

[FHU-yezi]

We can do both of these, add debounce option can reduce lag of pages which have input with on_change callback, allow to clear input without bind on_change callback can avoid the communication cost.

[simonmesmith]

Awesome!

[simonmesmith]

For anyone who needs to solve this before a fix gets released, here's a useful hack:

1. Change your input field to use on_blur, like this:

  pc.input(
    on_blur=State.set_user_message,
  ),

2. Use injected JavaScript to clear input fields after the user does something, like this:

pc.html(
    """<script>
        var buttons = document.getElementsByTagName("button");
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener("click", function() {
                if (this.innerText == "Send") {
                    var inputs = document.getElementsByTagName("input");
                    for (var j = 0; j < inputs.length; j++) {
                        inputs[j].value = "";
                    }
                }
            });
        }
    </script>"""

[simonmesmith]

(Someone please let me know if there's a better way to include JavaScript in a Pynecone page.)