Skip to content
This repository has been archived by the owner on Apr 29, 2023. It is now read-only.

Controlled components not possible #5

Open
aidanhs opened this issue Jan 27, 2019 · 1 comment
Open

Controlled components not possible #5

aidanhs opened this issue Jan 27, 2019 · 1 comment

Comments

@aidanhs
Copy link

aidanhs commented Jan 27, 2019

See yewstack/yew#233 (comment) for context.

Essentially, the desired behavior is: if an edit for a field (e.g. an input or text area) is 'rejected' (i.e. not applied to the model), the render should not update. In react this is known as 'controlled components'.

In willow you can test this by applying the patch I've pasted at the bottom and then editing the 'new item' input element on the todomvc example. Because the internal state isn't changing, arguably neither should the render. Unfortunately, it does.

React solves this by restoring state after a change event (described on the linked issue). Note that react also provides uncontrolled components where the value field is not set. I think the important thing is that both options are available (somehow).

diff --git a/examples/todomvc/src/app.rs b/examples/todomvc/src/app.rs
index 4195594..9dcd135 100644
--- a/examples/todomvc/src/app.rs
+++ b/examples/todomvc/src/app.rs
@@ -139,7 +139,7 @@ fn view_input(task: &str) -> Html<Msg> {
                     autofocus(true),
                     value(task),
                     name("newTodo"),
-                    on_input(Msg::UpdateField),
+                    //on_input(Msg::UpdateField),
                     on_enter(Msg::Add),
                 ],
                 &[],
@sindreij
Copy link
Owner

sindreij commented Feb 5, 2019

Thanks for the Issue. Looks like React is doing something to making the field read only when value is set, but not onChange. We should probably do something like that.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants