Stencil 1.5.0+ breaks previous functionality when using a checkbox inside a component

[arielsalminen]

Stencil version:

 @stencil/core@1.5.3

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

First of all, this bug was introduced in v1.5.0 so one of the changes in that particular version broke this functionality. The issue is that if I have a basic HTML Checkbox in a Stencil component and try to control its checked state via a prop/click on another element, Stencil doesn’t seem to render the change in the checkbox. You can make it checked just fine, but unchecking doesn’t seem to be possible programmatically. Since this has been working fine for the past 6 months I’m a little confused why this suddenly stopped working in version 1.5.0... I’ve created a simplified test component code below that reproduces the issue still for me.

Expected behavior:
The expected behaviour is that the checkbox switches between checked and unchecked states when clicking. Now you can only check the boxes but not uncheck them.

Steps to reproduce:
See my simplified test case below. With this component you should be able to just toggle the checkbox on and off when you click it. It works with Stencil.js 1.4.0, but not with 1.5.0+ anymore.

Related code:

import { Component, Prop, Host, h } from "@stencil/core"

@Component({
  tag: "my-checkbox",
})
export class MyCheckbox {
  @Prop({ mutable: true }) checked: boolean = false

  private onClick = (ev: Event) => {
    ev.preventDefault()
    this.checked = !this.checked
  }

  render() {
    return (
      <Host onClick={this.onClick}>
        <input type="checkbox" checked={this.checked} />
      </Host>
    )
  }
}

[arielsalminen]

As an update, this issue is still there in 1.5.3 too and is preventing at least our design system team from updating Stencil.js version above 1.4.0 as we use native checkboxes inside many of our components.

To clarify the above description a little, there doesn’t seem to be a way to programmatically “uncheck” a checkbox anymore.

@manucorporat Would you have any ideas what was changed in 1.5.0 which would cause this?

[arielsalminen]

The issue can be reproduced without the Host too, f.ex. doing something like this doesn’t work anymore in Stencil. The checkbox here gets never “unchecked” when pressing the button:

import { Component, Prop, h } from "@stencil/core"

@Component({
  tag: "my-checkbox",
})

export class MyCheckbox {
  @Prop({ mutable: true }) checked: boolean = true

  private onClick = () => {
    this.checked = false
  }

  render() {
    return (
      <div>
        <button onClick={this.onClick}>Uncheck checkbox</button>
        <input type="checkbox" checked={this.checked} />
      </div>
    )
  }
}

[lidahixson]

@viljamis How were you able to work around this bug?

[arielsalminen]

@manucorporat This doesn’t seem to be fully fixed yet. If you manually check input type radio or input type checkbox (by actually clicking it checked) there doesn’t seem to be any way to “uncheck” them anymore programmatically.

Think for example a case where user checks some checkboxes or radios and later on we need to reset them because of another selection. This isn’t currently possible which seems pretty limiting.

[manucorporat]

you need to synchronise the state of your component with tthe state of the input:

        <input type="checkbox" checked={this.checked} onChange={(ev)=this.checked=el.target.value}/>

[arielsalminen]

@manucorporat Thank you so much! You saved my day. It is all working now. 👍