[fix issue 632] textarea rendering issue

[PeterYusuke]

All Submissions:

• [x] Have you followed the guidelines stated in CONTRIBUTING.md file?
• [x] Have you checked to ensure there aren't any other open Pull Requests for the desired changed?

Type of change

Please delete options that are not relevant.

• [x] Bug fix (non-breaking change which fixes an issue)

Description

Add full_contoroll prop to textarea. In order to controll textarea, we need to synchronize the state. However, event chain executed asynchronizing. So, I synchronize state before event chain.

Usage

About interface, pass full_controll prop with True.

pc.text_area(
    value=State.area_value, 
    on_change=State.set_area_value,
    full_controll=True, # add full_controll=True
)

The js file is changed below.

// before
onChange={(_e) => Event([...chain])}

// after
onChange={(_e)=>{setState(prev =>{
  ... // set state sync
  }), 
  () => Event([...chain]) // event after set state
)}}

[PeterYusuke]

Close #632.

[PeterYusuke]

Now, rendering textare should work.

[info2wodayile]

Thanks everyone above!

[forhonourlx]

@PeterYusuke @picklelo I tested #632 problem under pynecone-io:main at this moment, found that input and cursor problem are fixed. But I lost control of the Button 'Clear' with an event chain, could you take further look at the reason? Thank you.

from pcconfig import config
import pynecone as pc
import time

docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"


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):
        print(f'>>Calling clear_area().area_value={area_value}')# not triggered
        time.sleep(2)
        self.area_value = ""
        self.set_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
                    ])
                )
            )
        ),
    )


# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)

app.compile()

Button 'Clear' has not be triggerd/printed, why?

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 921 ms (761 modules)
wait  - compiling...
event - compiled client and server successfully in 90 ms (761 modules)
wait  - compiling /404 (client and server)...
event - compiled client and server successfully in 59 ms (765 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 506 ms (850 modules)
wait  - compiling...
event - compiled client and server successfully in 122 ms (850 modules)

[PeterYusuke]

👀

[PeterYusuke]

@forhonourlx In my local environment, clear_area function is triggered.

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 2.3s (757 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 413 ms (843 modules)
wait  - compiling...
event - compiled client and server successfully in 181 ms (843 modules)
>>Calling clear_area().area_value=TestState
>>Calling clear_area().area_value=TestState

Didn't you forget add self?

Not

print(f'>>Calling clear_area().area_value={area_value}')# not triggered

but

print(f'>>Calling clear_area().area_value={self.area_value}')# not triggered

[info2wodayile]

Eh, yes. And more, my area_value is never cleared after 2s... I just tested from pynecone-io:main, anything wrong my config?

[PeterYusuke]

@info2wodayile I need some investigations. Could you please make new issue of this?

[forhonourlx]

@PeterYusuke Continue with #829, thanks!