1

I have a lightning-input checkbox. When the user checks it, I show a confirm dialog. If the user confirms the edit, the checkbox should get checked and disabled. If the user cancels, however, the checkbox should remain unchecked. The checked value is based on a property of the component.

<lightning-input
    checked={checked}
    disabled={checked}
    label="Disclosures Sent"
    type="checkbox"
    onclick={handleClick}
></lightning-input>
handleClick() {
    this.checked = confirm('Marking disclosures as sent will lock the value.');
}

If I click "OK" in the dialog, the checkbox gets checked and disabled as desired, but if I click "Cancel," the checkbox is checked and enabled.

How can I set the checkbox to unchecked if the user clicks "Cancel?"

2 Answers 2

1

In the handleClick method you should set the checked property of the element that raised the event, so you have to define an input parameter, i.e. event, in order to set event.target.checked according to the confirm's result.
I would also handle onchange instead of onclick.

JS

checked = false;

handleClick(event) {
    this.checked = confirm('Marking disclosures as sent will lock the value.');
    event.target.checked = this.checked;
}

HTML

<lightning-input
    checked={checked}
    disabled={checked}
    label="Disclosures Sent"
    type="checkbox"
    onchange={handleClick}
></lightning-input>

Demo

What happened:
Clicking on the checkbox you set the value of the element, but didn't change the value of checked, that remain false (if initialized as it), then confirm overwrite it with false, so the framework correctly doesn't notice a change in its value so doesn't trigger the refresh of html, that's why you have to set explicitly target.checked.

4
  • It wasn't the JS, it was the HTML.
    – sfdcfox
    Aug 16 at 18:12
  • @sfdcfox onclick fires twice, but I tested it here with onchange and without setting event.target.checked in the JS and the issue is still there, while adding that js line it's fixed
    – RubenDG
    Aug 16 at 18:30
  • I had to do both, actually. And having to manually set event.target.checked doesn't make much sense to me, although it worked. Why doesn't just checked={checked} work?
    – Chuck
    Aug 16 at 18:55
  • @Chuck I edited the answer explaining what happened
    – RubenDG
    Aug 16 at 19:04
1

onclick fires for most elements even when an element is disabled.

Because you didn't handle the changing of the value, the input element still thinks it is checked. This is not specific to the component; your code would do the same thing with normal HTML.

Use onchange instead.

<lightning-input checked={checked} disabled={checked} label="Disclosures Sent" type="checkbox" onchange={handleClick}>
</lightning-input>

Demo.

Edit: I just realized that you're setting this.checked to true, but the input value remains false on the first click, so the state is out of sync. When a second attempt is made, since the checked value now appears as true, it doesn't re-render the checked property, which allows the checkmark to be checked.

I've edited the demo above that demonstrates how to fix this:

  async handleClick(event) {
    if(confirm('Marking disclosures as sent will lock the value.')) {
      this.checked = true;
    } else {
      this.checked = true;
      await Promise.resolve();
      this.checked = false;
    }
  }
5
  • Clicking two times on the first lightning-input in the demo, and choosing always Cancel of course, still triggers the error described in the question
    – RubenDG
    Aug 16 at 18:39
  • @RubenDG Oh, I know what happened. That's silly. I'll make an edit.
    – sfdcfox
    Aug 16 at 18:59
  • null !== false :D You didn't initialized checked to false, so the first time it worked because it's reactive
    – RubenDG
    Aug 16 at 19:00
  • @RubenDG Yeah, that's largely irrelevant, you have to force a second render. This answer now reflects that.
    – sfdcfox
    Aug 16 at 19:02
  • that was relevant about why on the first click it worked in your demo, but not on the second one, anyway we both edited the answer explaining what happens behind the scene
    – RubenDG
    Aug 16 at 19:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.