Is this an issue or or my mistake

[cmbro]

I am not sure if this is an issue or simply my issue of not understanding something. I have setup this codepen to demonstrate: https://codepen.io/cmbro/pen/QYPrzO

I put the issue in the comments there. This is a simplified example to demonstrate; here is the code from that pen with the issue in the comments:

function Test (root) {
  this.state = {
    fields: {}
  };  

  this.state.fields.name = {
    init: ()=>{
      let thisField = this.state.fields.name;
      thisField.value = null;
      thisField.valid = null;
      thisField.disabled = false;
      thisField.errorMessage = '';
    },
    validate: (e, cb) => {
      let thisField = this.state.fields.name;
      // just a silly test... must include letter a
      if (e.target.value && e.target.value.indexOf('a')===-1) {
        thisField.value = null;
        thisField.valid = false;
      }
      else {
        thisField.value = e.target.value;
        thisField.valid = true;
      }
      cb();
    }
  };

  this.render = hyperHTML.bind(root);
  this.resetFields();
  this.update();
}

Test.prototype.resetFields = function () {
  this.state.fields.name.init();
};

Test.prototype.handleEvent = function (e) {
  switch (e.type) {
    case 'change': this.onChange(e); break;
  }
}

Test.prototype.onChange = function (e) {
  this.state.fields[e.target.name].validate(e, ()=>this.update());  
}

Test.prototype.update = function () {
  console.log(`name: ${this.state.fields.name.value}`);
  this.render`
  <label>
    Name: <input name="name" value=${this.state.fields.name.value} onchange=${this}>
  </label>
  <br>
  <button type="button" onclick=${this.onClickBtnReset.bind(this)}>Reset</button>`
}

Test.prototype.onClickBtnReset = function (e) {
  this.resetFields();
  this.update();
}

new Test(document.getElementById('app'));

1) Enter text with the letter a in it. Everything works. Click the reset button and that works

2) Now enter text without the letter a so that the input does not pass the simple validation test The input does not get updated (the validate function sets the value to null) The reset button doesn't work

Doesn't work means: My expectation is that the input is cleared due to state.fields.name.value being null, but that doesn't happen. The console log just before the render shows that the value is what I expect, but it isn't being rendered.

[WebReflection]

does this work any better? https://codepen.io/WebReflection/pen/MLRPaz?editors=0010

also bear in mind events in HTML are lowercase so that onclick=${...} or onchange=${...} should result into onclick() and onchange() methods

[cmbro]

Thanks so much for that quick response and for the advice.

I didn't understand at first until I realized that null and an empty string are not the same. So the way I was doing it, there was no change in the data thus no update. It makes sense, it just didn't click until you pointed it out.

Many thanks!