actually fix #684

To do this we keep a buffer of changed values client-side.
Then, as the server pushes renders to the client, we check
whether the server-rendered value matches the what was put
in the buffer. If it does, then we simply use the latest
value in the buffer and ignore the rendered value. If the
rendered value is different than the rendered value, then
we clear the buffer.

Author: rmorshea

docs/source/_custom_js/package-lock.json

@@ -38,6 +38,8 @@ export function Element({ model }) {
     }
   } else if (model.tagName == "script") {
     return html`<${ScriptElement} model=${model} />`;
+  } else if (model.tagName == "input") {
+    return html`<${InputElement} model=${model} />`;
   } else if (model.importSource) {
     return html`<${ImportedElement} model=${model} />`;
   } else {
@@ -68,6 +70,42 @@ function StandardElement({ model }) {
   );
 }
 
+function InputElement({ model }) {
+  const layoutContext = React.useContext(LayoutContext);
+  const props = createElementAttributes(model, layoutContext.sendEvent);
+
+  const observedValues = React.useState([])[0];
+
+  if (observedValues) {
+    if (observedValues[0] === props.value) {
+      observedValues.shift();
+      props.value = observedValues[observedValues.length - 1];
+    } else {
+      observedValues.length = 0;
+    }
+  }
+
+  const userOnChange = props.onChange;
+  if (userOnChange && !model.eventHandlers.onChange.preventDefault) {
+    props.onChange = (event) => {
+      observedValues.push(event.target.value);
+      userOnChange(event);
+    };
+  }
+
+  // Use createElement here to avoid warning about variable numbers of children not
+  // having keys. Warning about this must now be the responsibility of the server
+  // providing the models instead of the client rendering them.
+  return React.createElement(
+    model.tagName,
+    props,
+    ...createElementChildren(
+      model,
+      (model) => html`<${Element} key=${model.key} model=${model} />`
+    )
+  );
+}
+
 function ScriptElement({ model }) {
   const ref = React.useRef();
   React.useEffect(() => {

src/client/packages/idom-client-react/src/components.js

@@ -39,8 +39,6 @@ function createEventHandler(eventName, sendEvent, eventSpec) {
       if (typeof value === "object" && value.nativeEvent) {
         if (eventSpec["preventDefault"]) {
           value.preventDefault();
-        } else if (eventName === "onChange") {
-          value.nativeEvent.target.value = value.target.value;
         }
         if (eventSpec["stopPropagation"]) {
           value.stopPropagation();

src/client/packages/idom-client-react/src/element-utils.js

@@ -0,0 +1,43 @@
+import asyncio
+
+from idom import component, event, html, run, use_state
+
+
+@component
+def App():
+    recipient, set_recipient = use_state("Alice")
+    message, set_message = use_state("")
+
+    @event(prevent_default=True)
+    async def handle_submit(event):
+        set_message("")
+        print("About to send message...")
+        await asyncio.sleep(5)
+        print(f"Sent '{message}' to {recipient}")
+
+    return html.form(
+        {"onSubmit": handle_submit, "style": {"display": "inline-grid"}},
+        html.label(
+            "To: ",
+            html.select(
+                {
+                    "value": recipient,
+                    "onChange": lambda event: set_recipient(event["target"]["value"]),
+                },
+                html.option({"value": "Alice"}, "Alice"),
+                html.option({"value": "Bob"}, "Bob"),
+            ),
+        ),
+        html.input(
+            {
+                "type": "text",
+                "placeholder": "Your message...",
+                "value": message,
+                "onChange": lambda event: set_message(event["target"]["value"]),
+            }
+        ),
+        html.button({"type": "submit"}, "Send"),
+    )
+
+
+run(App)