Toggle field is not getting updated properly

Question

I have a scenario where I have toggle input and if the toggle input is changed, I have a Lightning Confirm popup and in that if the user selects okay button, the system should put whatever value the toggle input has current value in it but if the user selects cancel button, the system should put back to it's original state.

For example: Current Value of Toggle when page loads is True, If the user clicks on Toggle input, the Lightning confirm will open If the user selects okay button in the popup, the toggle should be disabled. If the user selects cancel button in the popup, the toggle should remain in it's previous state as True.

Here is the sample code I have

-----HTML---

<lightning-input type="toggle" lable="publish" onchange={handleToggleChange}  checked={isActive}></lightning-input>

-----JS-----

import { LightningElement, track } from 'lwc';
import LightningConfirm from 'lightning/confirm';

export default class MyApp extends LightningElement {


  @track isActive = false;

  async handleToggleChange() {
      const result = await LightningConfirm.open({
          message: 'this is the prompt message',
          variant: 'headerless',
      });
        
      if (result){
          //Do nothing because the user has provided consent to publish
      } else {
          this.isActive = !this.isActive;
      }
    }
}

The problem here is when the user clicks on Cancel button in the lightning prompt, toggle field is not setting back to it's original value. Am I missing something here? Any help would be appreciated! Thanks!

Answer 1

You need to prevent the value from being set until the confirmation occurs.

<lightning-input type="checkbox" onclick={confirmAction} ...></lightning-input>

async confirmAction(event) {
  if(event.target.checked) {
    return;
  }
  event.preventDefault();
  let result = await LightningConfirm.open({
    message: 'This is the message',
    variant: 'headerless'
  });
  if(result) {
    this.value = true;
  }
}

Answer 2

@@Loki_72 As u expected it will be false at first when we press cancel( even though toggle is on) it will become false again(Previous state) if we press okay nothing happens.

    async handleToggleChange() {
        const result = await LightningConfirm.open({
            message: 'this is the prompt message',
            variant: 'headerless',
        });
        
     if (result){
          //Do nothing because the user has provided consent to publish
      } else {
          this.template.querySelectorAll("lightning-input")[0].checked = this.isActive;
      }