fix(checkbox): change checkbox event type from change to click and add some logic for IE browser

packages/mdc-checkbox/README.md

@@ -182,6 +182,7 @@ Method Signature | Description
 `isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.
 `isChecked() => boolean` | Returns true if the component is checked.
 `hasNativeControl() => boolean` | Returns true if the input is present in the component.
+`setChecked(checkStatus: boolean) => void` | Sets the check status of the component.
 `setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.
 `setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.
 `removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.
@@ -192,4 +193,5 @@ Method Signature | Description
 --- | ---
 `setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.
 `handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.
-`handleChange() => void` | `change` event handler that should be applied to the checkbox element.
+`handleClick() => void` | `click` event handler that should be applied to the checkbox element.
+`handleChange() => void` | Actions taken after check status changes.

packages/mdc-checkbox/adapter.ts

@@ -37,6 +37,7 @@ export interface MDCCheckboxAdapter {
   isIndeterminate(): boolean;
   removeClass(className: string): void;
   removeNativeControlAttr(attr: string): void;
+  setChecked(checkStatus: boolean): void;
   setNativeControlAttr(attr: string, value: string): void;
   setNativeControlDisabled(disabled: boolean): void;
 }

packages/mdc-checkbox/component.ts

@@ -86,20 +86,20 @@ export class MDCCheckbox extends MDCComponent<MDCCheckboxFoundation> implements
   root_!: Element; // assigned in MDCComponent constructor
 
   private readonly ripple_: MDCRipple = this.createRipple_();
-  private handleChange_!: EventListener; // assigned in initialSyncWithDOM()
+  private handleClick_!: EventListener; // assigned in initialSyncWithDOM()
   private handleAnimationEnd_!: EventListener; // assigned in initialSyncWithDOM()
 
   initialSyncWithDOM() {
-    this.handleChange_ = () => this.foundation_.handleChange();
+    this.handleClick_ = () => this.foundation_.handleClick();
     this.handleAnimationEnd_ = () => this.foundation_.handleAnimationEnd();
-    this.nativeControl_.addEventListener('change', this.handleChange_);
+    this.nativeControl_.addEventListener('click', this.handleClick_);
     this.listen(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
     this.installPropertyChangeHooks_();
   }
 
   destroy() {
     this.ripple_.destroy();
-    this.nativeControl_.removeEventListener('change', this.handleChange_);
+    this.nativeControl_.removeEventListener('click', this.handleClick_);
     this.unlisten(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
     this.uninstallPropertyChangeHooks_();
     super.destroy();
@@ -117,6 +117,7 @@ export class MDCCheckbox extends MDCComponent<MDCCheckboxFoundation> implements
       isIndeterminate: () => this.indeterminate,
       removeClass: (className) => this.root_.classList.remove(className),
       removeNativeControlAttr: (attr) => this.nativeControl_.removeAttribute(attr),
+      setChecked: (checkStatus) => this.checked = checkStatus,
       setNativeControlAttr: (attr, value) => this.nativeControl_.setAttribute(attr, value),
       setNativeControlDisabled: (disabled) => this.nativeControl_.disabled = disabled,
     };

packages/mdc-checkbox/foundation.ts

@@ -48,12 +48,14 @@ export class MDCCheckboxFoundation extends MDCFoundation<MDCCheckboxAdapter> {
       isIndeterminate: () => false,
       removeClass: () => undefined,
       removeNativeControlAttr: () => undefined,
+      setChecked: () => undefined,
       setNativeControlAttr: () => undefined,
       setNativeControlDisabled: () => undefined,
     };
   }
 
   private currentCheckState_ = strings.TRANSITION_STATE_INIT;
+  private realCheckState_ = false;
   private currentAnimationClass_ = '';
   private animEndLatchTimer_ = 0;
   private enableAnimationEndHandler_ = false;
@@ -64,6 +66,7 @@ export class MDCCheckboxFoundation extends MDCFoundation<MDCCheckboxAdapter> {
 
   init() {
     this.currentCheckState_ = this.determineCheckState_();
+    this.realCheckState_ = this.adapter_.isChecked();
     this.updateAriaChecked_();
     this.adapter_.addClass(cssClasses.UPGRADED);
   }
@@ -98,7 +101,20 @@ export class MDCCheckboxFoundation extends MDCFoundation<MDCCheckboxAdapter> {
   }
 
   /**
-   * Handles the change event for the checkbox
+   * Handles the click event for the checkbox
+   */
+  handleClick() {
+    // added for IE browser to fix compatibility issue:
+    // https://github.com/material-components/material-components-web/issues/4893
+    const {TRANSITION_STATE_INDETERMINATE} = strings;
+    if (this.currentCheckState_ === TRANSITION_STATE_INDETERMINATE) {
+      this.adapter_.setChecked(!this.realCheckState_);
+    }
+    this.transitionCheckState_();
+  }
+
+  /**
+   * Handles the actions after check status changes
    */
   handleChange() {
     this.transitionCheckState_();
@@ -118,11 +134,16 @@ export class MDCCheckboxFoundation extends MDCFoundation<MDCCheckboxAdapter> {
     this.updateAriaChecked_();
 
     const {TRANSITION_STATE_UNCHECKED} = strings;
+    const {TRANSITION_STATE_CHECKED} = strings;
     const {SELECTED} = cssClasses;
     if (newState === TRANSITION_STATE_UNCHECKED) {
       this.adapter_.removeClass(SELECTED);
+      this.realCheckState_ = false;
     } else {
       this.adapter_.addClass(SELECTED);
+      if (newState === TRANSITION_STATE_CHECKED) {
+        this.realCheckState_ = true;
+      }
     }
 
     // Check to ensure that there isn't a previously existing animation class, in case for example

test/unit/mdc-checkbox/mdc-checkbox.test.js

@@ -143,11 +143,11 @@ test('get ripple returns a MDCRipple instance', () => {
   assert.isOk(component.ripple instanceof MDCRipple);
 });
 
-test('checkbox change event calls #foundation.handleChange', () => {
+test('checkbox click event calls #foundation.handleClick', () => {
   const {cb, component} = setupTest();
-  component.foundation_.handleChange = td.func();
-  domEvents.emit(cb, 'change');
-  td.verify(component.foundation_.handleChange(), {times: 1});
+  component.foundation_.handleClick = td.func();
+  domEvents.emit(cb, 'click');
+  td.verify(component.foundation_.handleClick(), {times: 1});
 });
 
 test('root animationend event calls #foundation.handleAnimationEnd', () => {
@@ -169,12 +169,12 @@ test('"indeterminate" property change hook calls foundation#handleChange', () =>
   td.verify(mockFoundation.handleChange(), {times: 1});
 });
 
-test('checkbox change event handler is destroyed on #destroy', () => {
+test('checkbox click event handler is destroyed on #destroy', () => {
   const {cb, component} = setupTest();
-  component.foundation_.handleChange = td.func();
+  component.foundation_.handleClick = td.func();
   component.destroy();
-  domEvents.emit(cb, 'change');
-  td.verify(component.foundation_.handleChange(), {times: 0});
+  domEvents.emit(cb, 'click');
+  td.verify(component.foundation_.handleClick(), {times: 0});
 });
 
 test('root animationend event handler is destroyed on #destroy', () => {
@@ -280,6 +280,18 @@ test('#adapter.hasNativeControl returns true when checkbox exists', () => {
   assert.isTrue(component.getDefaultFoundation().adapter_.hasNativeControl());
 });
 
+test('#adapter.setChecked returns true when checkbox is set checked', () => {
+  const {cb, component} = setupTest();
+  component.getDefaultFoundation().adapter_.setChecked(true);
+  assert.isTrue(cb.checked);
+});
+
+test('#adapter.setChecked returns false when checkbox is set not checked', () => {
+  const {cb, component} = setupTest();
+  component.getDefaultFoundation().adapter_.setChecked(false);
+  assert.isFalse(cb.checked);
+});
+
 test('#adapter.setNativeControlDisabled returns true when checkbox is disabled', () => {
   const {cb, component} = setupTest();
   component.getDefaultFoundation().adapter_.setNativeControlDisabled(true);