Prevent checkbox from being checked if confirm() popup === false?

1

I have an input toggle component which, when clicked, triggers a confirmation window. If the user clicks okay, the checked state becomes true and an action is fired. We have a css rule that when the input is checked, an animation fires.

unforunately, if the user clicks cancel, while the appropriate action fires, the css checked rule also still fires.

How can I prevent the checkbox from being checked if a user clicks cancel?

 // template.hbs
 {{input/input-toggle leftOpt="Text" rightOpt='Images' checked=(eq hooks.type 'images')}}
 
 //component.js
  toggleOpt='setHookType' items=hooks}}
     setHookType(hooks){
      if(confirm('Changing hook type will clear all hooks, continue?')) {
        this.sendAction('setHookType', hooks);
      }
    }
   
   //template.hbs
   {{leftOpt}}
     <label class="switch">
       {{input type="checkbox" change=(action 'toggleOption' items) checked=checked disabled=disabled}}
       <span data-test-input-toggle class="slider round {{class}}"></span>
     </label>
   {{rightOpt}}

   actions: {
      toggleOption(items){
         this.sendAction('toggleOpt', items)
      }
    }
  
   CSS
    input::checked + .slider::before {
        transform: translateX(26px);
    }
2

The DOM update event isn’t cancellable, meaning it’s basically too late to prevent the browser from doing its default behavior of toggling the checkbox.

But you can intercept an earlier event like click that is cancellable.

{{input type="checkbox" click=(action toggle) checked=checked }}

import Component from '@ember/component';
export default Component.extend({
  checked: true,
  toggle(event) {
    if (!confirm("Yes?")) {
      event.preventDefault();
    }
  }
});
2 Likes
3

I should also add that click fires for more than just actual clicks. The above works for keyboard-triggered events too.

4

Thanks for the explanation. Indeed it did work by using click=(action) but we had to refactor our component first t not be wrapped in a parent component. Thanks for the help!