From 8054aa744e4bf4f6fc9013497c5c53305b8dfc70 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 26 Nov 2017 17:21:57 -0800
Subject: [PATCH] Listen to every change, not just final change event (#688)

---
 js/automation-editor/automation.js             |  2 +-
 js/automation-editor/trigger/event.js          |  2 +-
 js/automation-editor/trigger/mqtt.js           |  4 ++--
 js/automation-editor/trigger/numeric_state.js  |  4 ++--
 js/automation-editor/trigger/state.js          |  4 ++--
 js/automation-editor/trigger/sun.js            |  2 +-
 js/automation-editor/trigger/time.js           |  2 +-
 js/common/component/condition/numeric_state.js |  4 ++--
 js/common/component/condition/state.js         |  2 +-
 js/common/component/condition/sun.js           |  4 ++--
 js/common/component/condition/time.js          |  4 ++--
 js/common/component/script/delay.js            |  2 +-
 js/common/component/script/event.js            |  2 +-
 js/common/component/script/wait.js             |  2 +-
 js/common/util/event.js                        | 10 +++++++---
 js/script-editor/script.js                     |  2 +-
 16 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/js/automation-editor/automation.js b/js/automation-editor/automation.js
index d76177333c..65c9e9edd3 100644
--- a/js/automation-editor/automation.js
+++ b/js/automation-editor/automation.js
@@ -60,7 +60,7 @@ export default class Automation extends Component {
                 label="Name"
                 name="alias"
                 value={alias}
-                onChange={this.onChange}
+                onvalue-changed={this.onChange}
               />
             </div>
           </paper-card>
diff --git a/js/automation-editor/trigger/event.js b/js/automation-editor/trigger/event.js
index c59861394d..620095ffe4 100644
--- a/js/automation-editor/trigger/event.js
+++ b/js/automation-editor/trigger/event.js
@@ -27,7 +27,7 @@ export default class EventTrigger extends Component {
           label="Event Type"
           name="event_type"
           value={event_type}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
         <JSONTextArea
           label="Event Data"
diff --git a/js/automation-editor/trigger/mqtt.js b/js/automation-editor/trigger/mqtt.js
index 144c65a3d1..c475f1c0a4 100644
--- a/js/automation-editor/trigger/mqtt.js
+++ b/js/automation-editor/trigger/mqtt.js
@@ -18,13 +18,13 @@ export default class MQTTTrigger extends Component {
           label="Topic"
           name="topic"
           value={topic}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
         <paper-input
           label="Payload (Optional)"
           name="payload"
           value={payload}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
       </div>
     );
diff --git a/js/automation-editor/trigger/numeric_state.js b/js/automation-editor/trigger/numeric_state.js
index a7c962f80c..583bbcaef9 100644
--- a/js/automation-editor/trigger/numeric_state.js
+++ b/js/automation-editor/trigger/numeric_state.js
@@ -35,13 +35,13 @@ export default class NumericStateTrigger extends Component {
           label="Above"
           name="above"
           value={above}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
         <paper-input
           label="Below"
           name="below"
           value={below}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
         <paper-textarea
           label="Value template (optional)"
diff --git a/js/automation-editor/trigger/state.js b/js/automation-editor/trigger/state.js
index 8eea0599e8..0b3d7b2e1b 100644
--- a/js/automation-editor/trigger/state.js
+++ b/js/automation-editor/trigger/state.js
@@ -34,13 +34,13 @@ export default class StateTrigger extends Component {
           label="From"
           name="from"
           value={trgFrom}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
         <paper-input
           label="To"
           name="to"
           value={to}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
         {trgFor && <pre>For: {JSON.stringify(trgFor, null, 2)}</pre>}
       </div>
diff --git a/js/automation-editor/trigger/sun.js b/js/automation-editor/trigger/sun.js
index 528fd8cbfe..2722088f44 100644
--- a/js/automation-editor/trigger/sun.js
+++ b/js/automation-editor/trigger/sun.js
@@ -36,7 +36,7 @@ export default class SunTrigger extends Component {
           label="Offset (optional)"
           name="offset"
           value={offset}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
       </div>
     );
diff --git a/js/automation-editor/trigger/time.js b/js/automation-editor/trigger/time.js
index a535764fa6..038e76aae5 100644
--- a/js/automation-editor/trigger/time.js
+++ b/js/automation-editor/trigger/time.js
@@ -18,7 +18,7 @@ export default class TimeTrigger extends Component {
           label="At"
           name="at"
           value={at}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
       </div>
     );
diff --git a/js/common/component/condition/numeric_state.js b/js/common/component/condition/numeric_state.js
index e892734cb6..1bb6a8e5ff 100644
--- a/js/common/component/condition/numeric_state.js
+++ b/js/common/component/condition/numeric_state.js
@@ -34,13 +34,13 @@ export default class NumericStateCondition extends Component {
           label="Above"
           name="above"
           value={above}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
         <paper-input
           label="Below"
           name="below"
           value={below}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
         <paper-textarea
           label="Value template (optional)"
diff --git a/js/common/component/condition/state.js b/js/common/component/condition/state.js
index e2cef4ede5..1220cbffe8 100644
--- a/js/common/component/condition/state.js
+++ b/js/common/component/condition/state.js
@@ -33,7 +33,7 @@ export default class StateCondition extends Component {
           label="State"
           name="state"
           value={state}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
         {cndFor && <pre>For: {JSON.stringify(cndFor, null, 2)}</pre>}
       </div>
diff --git a/js/common/component/condition/sun.js b/js/common/component/condition/sun.js
index 29f50c1fd6..df61dad4a2 100644
--- a/js/common/component/condition/sun.js
+++ b/js/common/component/condition/sun.js
@@ -45,7 +45,7 @@ export default class SunCondition extends Component {
           label="Before offset (optional)"
           name="before_offset"
           value={before_offset}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
           disabled={before === undefined}
         />
 
@@ -64,7 +64,7 @@ export default class SunCondition extends Component {
           label="After offset (optional)"
           name="after_offset"
           value={after_offset}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
           disabled={after === undefined}
         />
       </div>
diff --git a/js/common/component/condition/time.js b/js/common/component/condition/time.js
index a832679510..b5d804a3ed 100644
--- a/js/common/component/condition/time.js
+++ b/js/common/component/condition/time.js
@@ -18,13 +18,13 @@ export default class TimeCondition extends Component {
           label="After"
           name="after"
           value={after}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
         <paper-input
           label="Before"
           name="before"
           value={before}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
       </div>
     );
diff --git a/js/common/component/script/delay.js b/js/common/component/script/delay.js
index 74d61b2cba..7bf2bfe131 100644
--- a/js/common/component/script/delay.js
+++ b/js/common/component/script/delay.js
@@ -16,7 +16,7 @@ export default class DelayAction extends Component {
           label="Delay"
           name="delay"
           value={delay}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
       </div>
     );
diff --git a/js/common/component/script/event.js b/js/common/component/script/event.js
index 219e8aad38..43c1a32ccf 100644
--- a/js/common/component/script/event.js
+++ b/js/common/component/script/event.js
@@ -27,7 +27,7 @@ export default class EventAction extends Component {
           label="Event"
           name="event"
           value={event}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
         <JSONTextArea
           label="Service Data"
diff --git a/js/common/component/script/wait.js b/js/common/component/script/wait.js
index 4cf20fdc18..f61a3d0d8d 100644
--- a/js/common/component/script/wait.js
+++ b/js/common/component/script/wait.js
@@ -33,7 +33,7 @@ export default class WaitAction extends Component {
           label="Timeout (Optional)"
           name="timeout"
           value={timeout}
-          onChange={this.onChange}
+          onvalue-changed={this.onChange}
         />
       </div>
     );
diff --git a/js/common/util/event.js b/js/common/util/event.js
index 42c05f3fcf..4e13c69f4c 100644
--- a/js/common/util/event.js
+++ b/js/common/util/event.js
@@ -1,9 +1,13 @@
 export function onChangeEvent(prop, ev) {
-  const data = { ...this.props[prop] };
+  const origData = this.props[prop];
 
-  if (ev.target.value === data[ev.target.name]) {
+  if (ev.target.value === origData[ev.target.name]) {
     return;
-  } else if (ev.target.value) {
+  }
+
+  const data = { ...origData };
+
+  if (ev.target.value) {
     data[ev.target.name] = ev.target.value;
   } else {
     delete data[ev.target.name];
diff --git a/js/script-editor/script.js b/js/script-editor/script.js
index 271810adc6..ae5d044d2b 100644
--- a/js/script-editor/script.js
+++ b/js/script-editor/script.js
@@ -40,7 +40,7 @@ export default class ScriptEditor extends Component {
                 label="Name"
                 name="alias"
                 value={alias}
-                onChange={this.onChange}
+                onvalue-changed={this.onChange}
               />
             </div>
           </paper-card>