revert: fix(select): Do not fire change event on programmatic change (#…

…5255) (#5302)
material-components · Dec 3, 2019 · ad9dfe7 · ad9dfe7
1 parent f978109
commit ad9dfe7
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 23 deletions.
diff --git a/packages/mdc-layout-grid/mdc-layout-grid.scss b/packages/mdc-layout-grid/mdc-layout-grid.scss
@@ -64,7 +64,8 @@
       @for $span from 1 through map-get($mdc-layout-grid-columns, $upper-breakpoint) {
         // Span classes.
         // stylelint-disable max-nesting-depth
-        @at-root .mdc-layout-grid__cell--span-#{$span}, .mdc-layout-grid__cell--span-#{$span}-#{$size} {
+        @at-root .mdc-layout-grid__cell--span-#{$span},
+        .mdc-layout-grid__cell--span-#{$span}-#{$size} {
           @include mdc-layout-grid-cell-span_($size, $span, $gutter);
         }
         // stylelint-enable max-nesting-depth

diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
@@ -462,7 +462,7 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
 | `getSelectedIndex() => number` | Returns the index of the currently selected menu item. |
 | `setSelectedIndex(index: number) => void` | Handles setting the `mdc-select__selected-text` element and closing the menu. Also causes the label to float and outline to notch if needed. |
 | `getValue() => string` | Handles getting the value through the adapter. |
-| `setValue(value: string) => void` | Sets the selected index to the index of the menu item with the given value. |
+| `setValue() => string` | Sets the selected index to the index of the menu item with the given value. |
 | `setValid(isValid: boolean) => void` | Sets the valid state through the adapter. |
 | `isValid() => boolean` | Gets the valid state through the adapter's `checkValidity` API. |
 | `setRequired(isRequired: boolean) => void` | Sets the required state through the adapter. |

diff --git a/packages/mdc-select/foundation.ts b/packages/mdc-select/foundation.ts
@@ -147,16 +147,13 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
       this.adapter_.closeMenu();
     }
 
-    this.updateLabel_();
-    this.updateValidity_();
+    this.handleChange();
   }
 
   setValue(value: string) {
     const index = this.menuItemValues_.indexOf(value);
     this.setSelectedIndex(index);
-
-    this.updateLabel_();
-    this.updateValidity_();
+    this.handleChange();
   }
 
   getValue() {
@@ -232,8 +229,15 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
    */
   handleChange() {
     this.updateLabel_();
-    this.updateValidity_();
     this.adapter_.notifyChange(this.getValue());
+
+    const isRequired = this.adapter_.hasClass(cssClasses.REQUIRED);
+    if (isRequired) {
+      this.setValid(this.isValid());
+      if (this.helperText_) {
+        this.helperText_.setValidity(this.isValid());
+      }
+    }
   }
 
   handleMenuItemAction(index: number) {
@@ -398,9 +402,13 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
   }
 
   /**
-   * Updates the valid state when appropriate.
+   * Unfocuses the select component.
    */
-  private updateValidity_() {
+  private blur_() {
+    this.adapter_.removeClass(cssClasses.FOCUSED);
+    this.updateLabel_();
+    this.adapter_.deactivateBottomLine();
+
     const isRequired = this.adapter_.hasClass(cssClasses.REQUIRED);
     if (isRequired) {
       this.setValid(this.isValid());
@@ -409,16 +417,6 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
       }
     }
   }
-
-  /**
-   * Unfocuses the select component.
-   */
-  private blur_() {
-    this.adapter_.removeClass(cssClasses.FOCUSED);
-    this.updateLabel_();
-    this.updateValidity_();
-    this.adapter_.deactivateBottomLine();
-  }
 }
 
 // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -451,7 +451,6 @@
     $property-name: height,
   );
 
-  // stylelint-disable-next-line max-line-length
   $resolved-radius: nth(mdc-shape-resolve-percentage-radius($height, mdc-shape-prop-value($radius)), 1);
 
   @if (length(mdc-shape-prop-value($radius)) > 1) {

diff --git a/test/unit/mdc-select/foundation.test.js b/test/unit/mdc-select/foundation.test.js
@@ -256,11 +256,11 @@ test('#handleChange does not call foundation.notchOutline() when there is no lab
   td.verify(foundation.notchOutline(td.matchers.anything()), {times: 0});
 });
 
-test('#handleChange calls adapter.notifyChange()', () => {
+test('#handleChange calls adapter.notifyChange() if didChange is true', () => {
   const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.getMenuItemAttr(td.matchers.anything(), strings.VALUE_ATTR)).thenReturn('value');
 
-  foundation.handleChange();
+  foundation.handleChange(/* didChange */ true);
   td.verify(mockAdapter.notifyChange(td.matchers.anything()), {times: 1});
 });