actually fix #684

Because we handle events asynchronously, we must leave the value
uncontrolled in order to allow all changed committed by the user to be
recorded in the order they occur. If we don't, the user may commit
multiple changes before we render resulting in prior changes being
overwritten by subsequent ones. Instead of controlling the value, we set
it in an effect. This feels a bit hacky, but I can't think of a better
way to work around this problem.

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,39 @@ function StandardElement({ model }) {
   );
 }
 
+function InputElement({ model }) {
+  const ref = React.useRef();
+  const layoutContext = React.useContext(LayoutContext);
+
+  const props = createElementAttributes(model, layoutContext.sendEvent);
+  const value = props.value;
+  delete props.value;
+
+  console.log(value);
+  React.useEffect(() => {
+    if (value !== undefined) {
+      ref.current.value = value;
+    }
+  }, [ref.current, value]);
+
+  // 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,
+      ref: (target) => {
+        ref.current = target;
+      },
+    },
+    ...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();