Listen to every change, not just final change event (#688)

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>

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"

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>
     );

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)"

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>

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>
     );

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>
     );

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)"

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>

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>

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>
     );

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>
     );

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"

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>
     );

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];

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>