fix(select): reduce adapter apis not used in MDCReact and update events to new pattern (#3204)

BREAKING CHANGE: Removed some adapter APIs (setDisabled, setSelectedIndex, getSelectedIndex, setValue, registerInteractionHandler, deregisterInteractionHandler) and shifted responsibility of event handling and programmatic select element updates out of the foundation and into the component.

Author: Matt Goo

packages/mdc-select/README.md

@@ -9,8 +9,8 @@ path: /catalog/input-controls/select-menus/
 ## Important - Default Style Deprecation Notice
 
 The existing default select style will be changed in an upcoming release. The Material spec indicates that
-the default style will be the filled variant (currently referred to as the box variant). This will become the  
-default style. Continuing to add the `mdc-select--box` class to the select will result in no change. 
+the default style will be the filled variant (currently referred to as the box variant). This will become the
+default style. Continuing to add the `mdc-select--box` class to the select will result in no change.
 
 # Select Menus
 
@@ -100,7 +100,7 @@ modifier class on the root element.
 
 ### Outlined Select
 
-The Select Outlined variant uses the `mdc-notched-outline` in place of the `mdc-line-ripple` element and adds the 
+The Select Outlined variant uses the `mdc-notched-outline` in place of the `mdc-line-ripple` element and adds the
 `mdc-select--outlined` modifier class on the root element.
 
 ```html
@@ -247,19 +247,14 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
 | `floatLabel(value: boolean) => void` | Floats or defloats label. |
 | `activateBottomLine() => void` | Activates the bottom line component. |
 | `deactivateBottomLine() => void` | Deactivates the bottom line component. |
-| `setDisabled(disabled: boolean) => void` | Sets the `disabled` property of the `<select>` element. |
-| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` on the `<select>` element. |
-| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` on the `<select>` element. |
-| `getSelectedIndex() => number` | Returns the selected index of the `<select>` element. |
-| `setSelectedIndex(index: number) => void` | Sets the selected index of the `<select>` element. |
-| `getValue() => string` | Returns the value selected on the `<select>` element. |
-| `setValue(value: string) => void` | Sets the value of the `<select>` element. |
+| `getValue() => string` | Returns the value selected on the `select` element. |
 
 ### `MDCSelectFoundation`
 
 | Method Signature | Description |
 | --- | --- |
 | `notchOutline(openNotch: boolean) => void` | Opens/closes the notched outline. |
-| `setValue(value: string) => void` | Sets the value of the component. |
-| `setDisabled(disabled: boolean) => void` | Adds/removes disabled class, and sets disabled attribute on the component. |
-| `setSelectedIndex(selectedIndex: number) => void` | Sets the selected index of the component. |
+| `updateDisabledStyle(disabled: boolean) => void` | Updates appearance based on disabled state. This must be called whenever the `disabled` state changes. |
+| `handleFocus() => void` | Handles a focus event on the `select` element. |
+| `handleBlur() => void` | Handles a blur event on the `select` element. |
+| `handleChange() => void` | Handles a change to the `select` element's value. This must be called both for `change` events and programmatic changes requested via the component API. |

packages/mdc-select/foundation.js

@@ -38,13 +38,7 @@ export default class MDCSelectFoundation extends MDCFoundation {
       floatLabel: (/* value: boolean */) => {},
       activateBottomLine: () => {},
       deactivateBottomLine: () => {},
-      registerInteractionHandler: (/* type: string, handler: EventListener */) => {},
-      deregisterInteractionHandler: (/* type: string, handler: EventListener */) => {},
-      getSelectedIndex: () => /* number */ -1,
-      setSelectedIndex: (/* index: number */) => {},
-      setDisabled: (/* disabled: boolean */) => {},
-      getValue: () => /* string */ '',
-      setValue: (/* value: string */) => {},
+      getValue: () => {},
       isRtl: () => false,
       hasLabel: () => {},
       getLabelWidth: () => {},
@@ -59,62 +53,34 @@ export default class MDCSelectFoundation extends MDCFoundation {
 
     this.focusHandler_ = (evt) => this.handleFocus_(evt);
     this.blurHandler_ = (evt) => this.handleBlur_(evt);
-    this.selectionHandler_ = (evt) => this.handleSelect_(evt);
   }
 
-  init() {
-    this.adapter_.registerInteractionHandler('focus', this.focusHandler_);
-    this.adapter_.registerInteractionHandler('blur', this.blurHandler_);
-    this.adapter_.registerInteractionHandler('change', this.selectionHandler_);
-  }
-
-  destroy() {
-    this.adapter_.deregisterInteractionHandler('focus', this.focusHandler_);
-    this.adapter_.deregisterInteractionHandler('blur', this.blurHandler_);
-    this.adapter_.deregisterInteractionHandler('change', this.selectionHandler_);
-  }
-
-  setSelectedIndex(index) {
-    this.adapter_.setSelectedIndex(index);
-    this.floatLabelWithValue_();
-  }
-
-  setValue(value) {
-    this.adapter_.setValue(value);
-    this.setSelectedIndex(this.adapter_.getSelectedIndex());
-  }
-
-  setDisabled(disabled) {
+  updateDisabledStyle(disabled) {
     const {DISABLED} = MDCSelectFoundation.cssClasses;
-    this.adapter_.setDisabled(disabled);
     if (disabled) {
       this.adapter_.addClass(DISABLED);
     } else {
       this.adapter_.removeClass(DISABLED);
     }
   }
 
-  floatLabelWithValue_() {
+  handleChange() {
     const optionHasValue = this.adapter_.getValue().length > 0;
     this.adapter_.floatLabel(optionHasValue);
     this.notchOutline(optionHasValue);
   }
 
-  handleFocus_() {
+  handleFocus() {
     this.adapter_.floatLabel(true);
     this.notchOutline(true);
     this.adapter_.activateBottomLine();
   }
 
-  handleBlur_() {
-    this.floatLabelWithValue_();
+  handleBlur() {
+    this.handleChange();
     this.adapter_.deactivateBottomLine();
   }
 
-  handleSelect_() {
-    this.setSelectedIndex(this.adapter_.getSelectedIndex());
-  }
-
   /**
    * Opens/closes the notched outline.
    * @param {boolean} openNotch

packages/mdc-select/index.js

@@ -35,23 +35,26 @@ export class MDCSelect extends MDCComponent {
   }
 
   set value(value) {
-    this.foundation_.setValue(value);
+    this.nativeControl_.value = value;
+    this.foundation_.handleChange();
   }
 
   get selectedIndex() {
     return this.nativeControl_.selectedIndex;
   }
 
   set selectedIndex(selectedIndex) {
-    this.foundation_.setSelectedIndex(selectedIndex);
+    this.nativeControl_.selectedIndex = selectedIndex;
+    this.foundation_.handleChange();
   }
 
   get disabled() {
     return this.nativeControl_.disabled;
   }
 
   set disabled(disabled) {
-    this.foundation_.setDisabled(disabled);
+    this.nativeControl_.disabled = disabled;
+    this.foundation_.updateDisabledStyle(disabled);
   }
 
   /**
@@ -94,6 +97,38 @@ export class MDCSelect extends MDCComponent {
     return new MDCRipple(this.root_, foundation);
   }
 
+  initialSyncWithDOM() {
+    this.handleChange_ = () => this.foundation_.handleChange();
+    this.handleFocus_ = () => this.foundation_.handleFocus();
+    this.handleBlur_ = () => this.foundation_.handleBlur();
+
+    this.nativeControl_.addEventListener('change', this.handleChange_);
+    this.nativeControl_.addEventListener('focus', this.handleFocus_);
+    this.nativeControl_.addEventListener('blur', this.handleBlur_);
+
+    // Initially sync floating label
+    this.foundation_.handleChange();
+
+    if (this.nativeControl_.disabled) {
+      this.disabled = true;
+    }
+  }
+
+  destroy() {
+    this.nativeControl_.removeEventListener('change', this.handleChange_);
+    this.nativeControl_.removeEventListener('focus', this.handleFocus_);
+    this.nativeControl_.removeEventListener('blur', this.handleBlur_);
+
+    if (this.ripple) {
+      this.ripple.destroy();
+    }
+    if (this.outline_) {
+      this.outline_.destroy();
+    }
+
+    super.destroy();
+  }
+
   getDefaultFoundation() {
     return new MDCSelectFoundation((Object.assign({
       addClass: (className) => this.root_.classList.add(className),
@@ -109,39 +144,14 @@ export class MDCSelect extends MDCComponent {
           this.lineRipple_.deactivate();
         }
       },
-      setDisabled: (disabled) => this.nativeControl_.disabled = disabled,
-      registerInteractionHandler: (type, handler) => this.nativeControl_.addEventListener(type, handler),
-      deregisterInteractionHandler: (type, handler) => this.nativeControl_.removeEventListener(type, handler),
-      getSelectedIndex: () => this.nativeControl_.selectedIndex,
-      setSelectedIndex: (index) => this.nativeControl_.selectedIndex = index,
-      getValue: () => this.nativeControl_.value,
-      setValue: (value) => this.nativeControl_.value = value,
       isRtl: () => window.getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl',
+      getValue: () => this.nativeControl_.value,
     },
     this.getOutlineAdapterMethods_(),
     this.getLabelAdapterMethods_()))
     );
   }
 
-  initialSyncWithDOM() {
-    // needed to sync floating label
-    this.selectedIndex = this.nativeControl_.selectedIndex;
-
-    if (this.nativeControl_.disabled) {
-      this.disabled = true;
-    }
-  }
-
-  destroy() {
-    if (this.ripple) {
-      this.ripple.destroy();
-    }
-    if (this.outline_) {
-      this.outline_.destroy();
-    }
-    super.destroy();
-  }
-
   /**
    * @return {!{
    *   notchOutline: function(number, boolean): undefined,