Working with checkboxes always produces warning in console

To reproduce the problem add something like this in a kotlin-react app. The state needs to have a var myBoolean, that has an initial value of false:

input(InputType.checkBox) {
  attrs.onChangeFunction = { event ->
    val newValue = (event.target as HTMLInputElement).checked
    setState { myBoolean=newValue }
  }
  attrs.checked = state.myBoolean
}

Then open the app in the browser and click on the checkbox. The following warning will appear in the console of the browser: “A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.”

I have investigated the issue myself and I suspect that the problem is due to the setter of the checked property of the input removing the checked attribute when the value is false.

[fluidsonic]

I also ran into this.

Workaround:

val isChecked: Boolean = …
// attrs.checked = isChecked
attrs["checked"] = isChecked

[TorRanfelt]

@Hypnosphi Sadly, as three developers in a startup we don’t have resources for that kind of thing.