onClick action for selectable items

addon/components/selectable-item.js

@@ -28,6 +28,10 @@ export default Component.extend(ChildComponentSupport, {
         group.setValueSelection(this.get('value'), val);
       }
       this.sendAction('action', { checked: !!val });
+
+      // Because the click() event is fired twice (on checkboxes at least), need to reset this var to its default
+      // so the click action can be fired again on the next click
+      this.set('clickActionWasSent', false);
       return !!val;
     }
   }),
@@ -46,6 +50,25 @@ export default Component.extend(ChildComponentSupport, {
     this._setupLabel();
   },
 
+  onClick: null,
+  // For some reason, click is called twice, requiring a variable to avoid sending the action twice
+  clickActionWasSent: false,
+
+  click() {
+    this._super(...arguments);
+    let clickAction = this.get('onClick');
+    let isSelected = !this.get('isSelected');
+
+    if (!this.get('clickActionWasSent')) {
+      if (typeof clickAction === 'function') {
+        clickAction(isSelected);
+      } else if (typeof clickAction === 'string') {
+        this.sendAction('onClick', isSelected);
+      }
+      this.set('clickActionWasSent', true);
+    }
+  },
+
   group: computed(function() {
     return this.nearestWithProperty('__materializeSelectableItemGroup');
   })

tests/dummy/app/controllers/forms.js

@@ -65,6 +65,7 @@ export default Controller.extend({
   checkValueTwo: true,
 
   checkboxIsSelected: false,
+  checkboxWithActionIsSelected: false,
   radioIsSelected: false,
   radioSelection: 2,
   otherRadioSelection: 'green',
@@ -108,5 +109,12 @@ export default Controller.extend({
   switchesSelectionsString: asJSON('switchesSelections'),
 
   checkboxChoicesString: asJSON('checkboxChoices'),
-  checkboxSelectionsString: asJSON('checkboxSelections')
+  checkboxSelectionsString: asJSON('checkboxSelections'),
+
+  actions: {
+    checkboxClickAction(isChecked) {
+      let stateText = isChecked === true ? `Yes, of course.` : `Nope, hombre.`;
+      window.alert(`Are you checked? ` + stateText);
+    }
+  }
 });

tests/dummy/app/templates/forms.hbs

@@ -110,6 +110,8 @@
         {{/options-panel}}
         <h5>Checkbox</h5>
         {{example-snippet snippet='input-check-basic' class='checkbox-example' checkboxIsSelected=checkboxIsSelected}}
+        <h5>Checkbox with action</h5>
+        {{example-snippet snippet='input-check-action' class='checkbox-example' checkboxIsSelected=checkboxWithActionIsSelected}}
     </div>
 
     <div class="section">

tests/dummy/app/templates/snippets/input-check-action.hbs

@@ -0,0 +1 @@
+{{md-check name="A checkbox with an action" checked=checkboxWithActionIsSelected onClick="checkboxClickAction"}}