How to solve `pc.text_area` state render problem?

[forhonourlx]

Describe the bug Hi, I am trying a create a fully controlled pc.text_area, so that can be cleared by a button. Using pc.text_area(value=State.area_value, on_change=State.set_area_value), when I move the cursor inside the text and after key up, the cusor will be auto focus at the end of the text and seems very laggy at complicated components. Evenmore, when I key non-English words(like Chinese Pinyin Input), the input process will be interrupted at second key down and it leaves wrong string terribly. Or using pc.text_area(on_blur=State.set_area_value), I lost control of State.area_value and cannot clear text_area.

How to solve the above bind and state render scenario？Could we render state manually or any other solutions? Thanks inadvance.

To Reproduce

class State(pc.State):
    """The app state."""
    area_value: str = "TestState"
    show_progress: bool = False

    def toggle_progress(self):
        self.show_progress = not self.show_progress

    def clear_area(self):
        time.sleep(2)
        self.area_value = ""

def index() -> pc.Component:
    return pc.center(
        pc.vstack(
            pc.text_area(value=State.area_value, on_change=State.set_area_value),#, 
            #pc.text_area(on_blur=State.set_area_value),#, 
            pc.hstack(
                pc.cond(
                    State.show_progress,
                    pc.circular_progress(is_indeterminate=True ),
                    pc.button("Clear", on_click=[
                        State.toggle_progress,
                        State.clear_area,
                        State.toggle_progress
                    ])
                )
            )
        ),
    )

** Specifics (please complete the following information):**

• Python Version: 3.10
• Pynecone Version: 0.1.19
• OS: Windows
• Browser (Optional): Edge

Additional context Add any other context about the problem here.

[PeterYusuke]

According to React document this is the right way.

I think thera are two reasons the cursor jumps to end of text:

1. reset the input value with state's value.
   Textare with only value=State.area_value always update input.
2. update the input value with on change event.
   if chage clear button event to updating the input with 1TestState, when my cursor is located after 1 char it is jumped.

Kind of tricky, cause when the on change event is happeing, the state remains the same before on the other hand event string is the new one.

I try to figure out the best way though.