[v4] Strange nested component redraw bug after updating parent state

Bug Report

Context

Take a page containing the following…

<h1>Hello!</h1>
<session-panel />

…with a session-panel component defined in a singe index.marko file…

components/session-panel/index.marko

<script>
module.exports = {
  onInput(attrs) {
    this.state = { passwordGrade: 'bad' }
  },
  setGrade(newGrade) {
    console.log("Setting", newGrade)
    this.state.passwordGrade = newGrade
  }
}
</script>

<form class="session-panel" method="POST">

  <h3>Sign Up for an Account:</h3>
  <password-picker on-grade('setGrade') />
  <button type="submit" disabled=( state.passwordGrade == 'bad' )>Sign Up</button>

</form>

…and the following component for password-picker…

components/password-picker/index.marko

<script>
module.exports = {
  onInput(attrs) {
    this.state = { password: '', grade: 'bad' }
  },
  setPassword(e) {
    this.state.password = e.target.value
    if (this.state.password.length >= 3) {
      this.state.grade = 'good' // joke
    }
    else {
      this.state.grade = 'bad'
    }
    console.log("Emitting", this.state.grade)
    this.emit('grade', this.state.grade)
  },
}
</script>

<div class="password-picker">

  <input type="password" name="password" value=state.password
         on-input('setPassword') placeholder="Please enter a password" />

  <div class="grade">
    Password strength:
    <b if(state.grade == 'good')>Good!</b>
    <b else>Bad password. Bad!</b>
  </div>
</div>

Expected Behavior

Typing three characters into the input box should enable the submit button.

Actual Behavior

Typing three characters into the input box resets and re-initializes the password-picker component. Typing another character also does not show up. It does enable the submit button, though.

If you remove the this.state.passwordGrade = newGrade line, the password-picker component no longer re-initializes.

Additional Info

Your Environment

• Version used: v4.0.0-rc.8
• Environment name and version: Chrome 54
• Operating System and version: OS X

[mlrawlings]

@mindeavor I wonder if there could be value in making this work using constructor:

class {
    constructor(input, out) {
        this.state = {
            count: input.startCount
        };
    }
    onInput(input, out) {
        this.state.color = input.color;
    }
    increment() {
        this.state.count++;
    }
}

<div>${state.count}</div>
<button on-click('increment')>+</button>

<counter start-count=0 color="#ccc"/>

In this hypothetical example, both constructor and onInput would be called when creating the component, yielding an initial state of { count:0, color:'#ccc' }.

Changing the value of the color attribute would only call onInput and therefore would not clobber the existing count.

[gilbert]

@mlrawlings Yes, using constructor makes a lot of sense 😃 How would constructor run with respect to server/client side rendering?