From fddd1d82cd05fb9c28c04cc80d533049d4c132dd Mon Sep 17 00:00:00 2001
From: Ryan Morshead <ryan.morshead@gmail.com>
Date: Mon, 28 Feb 2022 08:55:09 -0800
Subject: [PATCH] set target value onchange client-side (#694)

* set target value onchange client-side

This may not be a perfect solution. I worry that doing this may have unintended
consiquences. For example, what if someone wanted to have some sort of
auto-correct feature. Will setting the target value somehow overwrite
auto-corrections? From limited testing it seems to work fine, but that
testing was not extensive.

* changelog entry
---
 docs/source/about/changelog.rst                        |  4 +++-
 .../packages/idom-client-react/src/element-utils.js    | 10 ++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/source/about/changelog.rst b/docs/source/about/changelog.rst
index bed99bf10..1b570545e 100644
--- a/docs/source/about/changelog.rst
+++ b/docs/source/about/changelog.rst
@@ -16,7 +16,9 @@ scheme for the project adheres to `Semantic Versioning <https://semver.org/>`__.
 Unreleased
 ----------
 
-Nothing yet...
+Fixed:
+
+- ``onChange`` event for inputs missing key strokes :issue:`684`
 
 
 0.37.0
diff --git a/src/client/packages/idom-client-react/src/element-utils.js b/src/client/packages/idom-client-react/src/element-utils.js
index 55709301f..e9a39458c 100644
--- a/src/client/packages/idom-client-react/src/element-utils.js
+++ b/src/client/packages/idom-client-react/src/element-utils.js
@@ -22,19 +22,25 @@ export function createElementAttributes(model, sendEvent) {
 
   if (model.eventHandlers) {
     for (const [eventName, eventSpec] of Object.entries(model.eventHandlers)) {
-      attributes[eventName] = createEventHandler(sendEvent, eventSpec);
+      attributes[eventName] = createEventHandler(
+        eventName,
+        sendEvent,
+        eventSpec
+      );
     }
   }
 
   return attributes;
 }
 
-function createEventHandler(sendEvent, eventSpec) {
+function createEventHandler(eventName, sendEvent, eventSpec) {
   return function () {
     const data = Array.from(arguments).map((value) => {
       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();