The select element displays the option before the one actually selected

[Dlucafo]

Marko Version: 5.22.1

Details

The select element displays the option before the one actually selected. Although the generated HTML looks correct, the page displays the wrong option. This occurs if the distance between the current option and the one selected after the refresh is greater than two.

Expected Behavior

Displays the option with "selected" parameter

Actual Behavior

Displays the option above the selected one.

Additional Info

Your Environment

• Node 18.13.0
• Desktop chrome

"dependencies": {
    "@marko/express": "^2.1.0",
    "@marko/webpack": "^9.3.1",
    "express": "^4.18.2",
    "marko": "^5.22.1"
  },
  "devDependencies": {
    "webpack-cli": "^5.0.1"
  }

Code related

class {
  onCreate() {
    this.state = {
      nome: '',
      item: [1, 2, 3, 4, 5],
      selected: 2
    }
  }
  
  onInput(input) {
    this.state.nome = input.nome;
  }

  onClick() {
    this.state.selected = 4;
    
  }
}

<div>
  <span>
    ${state.nome}
  </span>
  <span>
  <select>
    <for|number, i| of=state.item>  
      <if(number === state.selected )>
      <option value=i selected>${number}</option>
      </if>
      <else>
      <option value=i>${number}</option>
      </else>
    </for>
  </select>
  <button onclick("onClick")>Clik me</button>
  </span>
</div>

HTML code (PRE CLICK):

visual (PRE CLICK):

HTML code (POST CLIK):

visual (POST CLICK):

Step to reproduce

1. Create select with almost three option generate with for cycle and if inside (see code above)
2. Create a button that refresh the state and change the selected value (if change, see code above)
3. See HTML code before and after the click

Add info

The problem was not present in marko version 4.4.28. Updating marko release 4 to the latest version (4.24.6), the problem occurs.

[Dylan Piercey]

It looks like this is fixed in latest Marko