Event bubbling can be disabled for binary state components

addon/components/mdc-checkbox.js

@@ -3,11 +3,12 @@ import layout from '../templates/components/mdc-checkbox';
 import { addClass, removeClass, MDCComponent } from '../mixins/mdc-component';
 import getElementProperty from '../utils/get-element-property';
 import { MDCCheckboxFoundation } from '@material/checkbox';
+import SupportsBubblesFalse from '../mixins/supports-bubbles-false';
 
 const { ANIM_END_EVENT_NAME } = MDCCheckboxFoundation.strings;
 const { get, set, run } = Ember;
 
-export default Ember.Component.extend(MDCComponent, {
+export default Ember.Component.extend(MDCComponent, SupportsBubblesFalse, {
   //region Attributes
   /**
    * This property is considered read-only by the component, and will not be

addon/components/mdc-radio.js

@@ -3,10 +3,11 @@ import layout from '../templates/components/mdc-radio';
 import getElementProperty from '../utils/get-element-property';
 import { MDCComponent } from '../mixins/mdc-component';
 import { MDCRadioFoundation } from '@material/radio';
+import SupportsBubblesFalse from '../mixins/supports-bubbles-false';
 
 const { get } = Ember;
 
-export default Ember.Component.extend(MDCComponent, {
+export default Ember.Component.extend(MDCComponent, SupportsBubblesFalse, {
   //region Attributes
   /**
    * This property is considered read-only by the component, and will not be

addon/components/mdc-switch.js

@@ -1,9 +1,10 @@
 import Ember from 'ember';
 import layout from '../templates/components/mdc-switch';
+import SupportsBubblesFalse from '../mixins/supports-bubbles-false';
 
 const { get } = Ember;
 
-export default Ember.Component.extend({
+export default Ember.Component.extend(SupportsBubblesFalse, {
   //region Attributes
   /**
    * This property is considered read-only by the component, and will not be

addon/mixins/supports-bubbles-false.js

@@ -0,0 +1,19 @@
+import Ember from 'ember';
+
+const { Mixin, get } = Ember;
+
+export default Mixin.create({
+  //region attributes
+  bubbles: true,
+  //endregion
+
+  //region actions
+  actions: {
+    clicked(ev) {
+      if (!get(this, 'bubbles')) {
+        ev.stopPropagation();
+      }
+    }
+  }
+  //endregion
+});

addon/templates/components/mdc-checkbox.hbs

@@ -1,4 +1,4 @@
-<input type="checkbox" id={{input-id}} name={{name}} onchange={{action "inputChanged"}} class="mdc-checkbox__native-control">
+<input type="checkbox" onclick={{action "clicked"}} id={{input-id}} name={{name}} onchange={{action "inputChanged"}} class="mdc-checkbox__native-control">
 <div class="mdc-checkbox__background">
     <svg version="1.1"
         class="mdc-checkbox__checkmark"

addon/templates/components/mdc-radio.hbs

@@ -1,4 +1,4 @@
-<input class="mdc-radio__native-control" type="radio" id={{input-id}} name={{name}} onchange={{action "inputChanged"}}>
+<input class="mdc-radio__native-control" onclick={{action "clicked"}} type="radio" id={{input-id}} name={{name}} onchange={{action "inputChanged"}}>
 <div class="mdc-radio__background">
   <div class="mdc-radio__outer-circle"></div>
   <div class="mdc-radio__inner-circle"></div>

addon/templates/components/mdc-switch.hbs

@@ -1,4 +1,4 @@
-<input type="checkbox" id={{input-id}} onchange={{action "inputChanged"}} class="mdc-switch__native-control" disabled={{disabled}} />
+<input type="checkbox" onclick={{action "clicked"}} id={{input-id}} onchange={{action "inputChanged"}} class="mdc-switch__native-control" disabled={{disabled}} />
 <div class="mdc-switch__background">
   <div class="mdc-switch__knob"></div>
 </div>

tests/dummy/app/styles/app.css

@@ -15,3 +15,8 @@ label {
 .component-doc .mdc-card {
   width: 480px;
 }
+
+.test-action-bubbling {
+  border: 1px solid black;
+  padding: 20px;
+}

tests/dummy/app/templates/application.hbs

@@ -57,6 +57,11 @@
   </label>
   {{mdc-checkbox input-id="checkbox-for" checked=isCheckboxTwoChecked onchange=(action (mut isCheckboxTwoChecked))}}
   <label for="checkbox-for">Disassociated Label Checkbox</label>
+
+  <div class="test-action-bubbling" {{action "alert" "Stop the bubbling"}}>
+    {{mdc-checkbox input-id="checkbox-for" checked=isCheckboxThreeChecked onchange=(action (mut isCheckboxThreeChecked)) bubbles=false}}
+    <div>Checkbox event propagation is disableable: click outside of the checkbox to test</div>
+  </div>
 </section>
 
 <section class="component-doc">
@@ -86,6 +91,10 @@
       C
     </label>
   </fieldset>
+  <div class="test-action-bubbling" {{action "alert" "Stop the bubbling"}}>
+    {{mdc-radio checked=isRadioFourChecked onchange=(action (mut isRadioFourChecked)) bubbles=false}}
+    <div>Radio button event propagation is disableable: click outside of the checkbox to test</div>
+  </div>
 </section>
 
 <section class="component-doc">
@@ -339,6 +348,13 @@
   </label>
   <h3 class="mdc-typography--subheading2">Disabled Switch</h3>
   {{mdc-switch disabled=true}}
+
+
+  <h3 class="mdc-typography--subheading2">Stops Bubbling</h3>
+  <div class="test-action-bubbling" {{action "alert" "Stop the bubbling"}}>
+    {{mdc-switch bubbles=false}}
+    <div>Switch event propagation is disableable: click outside of the checkbox to test</div>
+  </div>
 </section>
 
 {{/if}}

tests/unit/mixins/supports-bubbles-false-test.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+import SupportsBubblesFalseMixin from 'ember-material-components-web/mixins/supports-bubbles-false';
+import { module, test } from 'qunit';
+
+module('Unit | Mixin | supports bubbles false');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let SupportsBubblesFalseObject = Ember.Object.extend(SupportsBubblesFalseMixin);
+  let subject = SupportsBubblesFalseObject.create();
+  assert.ok(subject);
+});