fix(select): Remove animation causing the bottom line to flash (#2612)

material-components · Apr 20, 2018 · 639387e · 639387e
1 parent 2703580
commit 639387e
Show file tree

Hide file tree

Showing 5 changed files with 2 additions and 45 deletions.
diff --git a/packages/mdc-select/constants.js b/packages/mdc-select/constants.js
@@ -17,11 +17,6 @@ export const cssClasses = {
   BOX: 'mdc-select--box',
   DISABLED: 'mdc-select--disabled',
   ROOT: 'mdc-select',
-  IS_CHANGING: 'mdc-select--is-changing',
-};
-
-export const numbers = {
-  FLOAT_NATIVE_CONTROL_TRANSITION_TIME_MS: 125,
 };
 
 export const strings = {

diff --git a/packages/mdc-select/foundation.js b/packages/mdc-select/foundation.js
@@ -15,17 +15,13 @@
  */
 
 import {MDCFoundation} from '@material/base/index';
-import {cssClasses, numbers, strings} from './constants';
+import {cssClasses, strings} from './constants';
 
 export default class MDCSelectFoundation extends MDCFoundation {
   static get cssClasses() {
     return cssClasses;
   }
 
-  static get numbers() {
-    return numbers;
-  }
-
   static get strings() {
     return strings;
   }
@@ -68,16 +64,8 @@ export default class MDCSelectFoundation extends MDCFoundation {
   }
 
   setSelectedIndex(index) {
-    const {IS_CHANGING} = MDCSelectFoundation.cssClasses;
-    const {FLOAT_NATIVE_CONTROL_TRANSITION_TIME_MS} = MDCSelectFoundation.numbers;
-
     this.adapter_.setSelectedIndex(index);
-    this.adapter_.addClass(IS_CHANGING);
     this.floatLabelWithValue_();
-
-    setTimeout(() => {
-      this.adapter_.removeClass(IS_CHANGING);
-    }, FLOAT_NATIVE_CONTROL_TRANSITION_TIME_MS);
   }
 
   setValue(value) {

diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss
@@ -92,13 +92,6 @@
   }
 }
 
-// needed to make this a keyframe animation because having translateY in the
-// not-selected state caused an unwanted scrolling behavior to occur
-.mdc-select--is-changing .mdc-select__native-control {
-  animation: mdc-select-float-native-control 125ms 1;
-  animation-timing-function: $mdc-animation-deceleration-curve-timing-function;
-}
-
 .mdc-select--box {
   @include mdc-select-container-fill-color(rgba(black, .04));
   @include mdc-ripple-surface;

diff --git a/test/unit/mdc-select/foundation-events.test.js b/test/unit/mdc-select/foundation-events.test.js
@@ -15,8 +15,6 @@
  */
 
 import td from 'testdouble';
-import lolex from 'lolex';
-
 import {setupFoundationTest} from '../helpers/setup';
 import {captureHandlers} from '../helpers/foundation';
 
@@ -62,16 +60,12 @@ test('on blur with value floats label', () => {
 });
 
 test('on select value change with option value', () => {
-  const clock = lolex.install();
   const {mockAdapter, handlers} = setupTest();
   td.when(mockAdapter.getSelectedIndex()).thenReturn(1);
   td.when(mockAdapter.getValue()).thenReturn('abc');
   td.when(mockAdapter.setSelectedIndex(1)).thenReturn();
   handlers.change({
     target: {value: 'abc'},
   });
-  td.verify(mockAdapter.addClass(MDCSelectFoundation.cssClasses.IS_CHANGING), {times: 1});
   td.verify(mockAdapter.floatLabel(true), {times: 1});
-  clock.tick(MDCSelectFoundation.numbers.FLOAT_NATIVE_CONTROL_TRANSITION_TIME_MS);
-  td.verify(mockAdapter.removeClass(MDCSelectFoundation.cssClasses.IS_CHANGING), {times: 1});
 });
diff --git a/test/unit/mdc-select/foundation.test.js b/test/unit/mdc-select/foundation.test.js
@@ -15,25 +15,20 @@
  */
 
 import {assert} from 'chai';
-import lolex from 'lolex';
 import td from 'testdouble';
 
 import {setupFoundationTest} from '../helpers/setup';
 import {verifyDefaultAdapter} from '../helpers/foundation';
 
 import MDCSelectFoundation from '../../../packages/mdc-select/foundation';
-import {cssClasses, numbers, strings} from '../../../packages/mdc-select/constants';
+import {cssClasses, strings} from '../../../packages/mdc-select/constants';
 
 suite('MDCSelectFoundation');
 
 test('exports cssClasses', () => {
   assert.deepEqual(MDCSelectFoundation.cssClasses, cssClasses);
 });
 
-test('exports numbers', () => {
-  assert.deepEqual(MDCSelectFoundation.numbers, numbers);
-});
-
 test('exports strings', () => {
   assert.deepEqual(MDCSelectFoundation.strings, strings);
 });
@@ -89,14 +84,6 @@ test('#setSelectedIndex calls adapter.setSelectedIndex', () => {
   td.verify(mockAdapter.setSelectedIndex(1));
 });
 
-test(`#setSelectedIndex adds then removes ${MDCSelectFoundation.cssClasses.IS_CHANGING}`, () => {
-  const {mockAdapter, foundation} = setupTest();
-  const clock = lolex.install();
-  foundation.setSelectedIndex(1);
-  td.verify(mockAdapter.addClass(MDCSelectFoundation.cssClasses.IS_CHANGING));
-  clock.tick(MDCSelectFoundation.numbers.FLOAT_NATIVE_CONTROL_TRANSITION_TIME_MS);
-  td.verify(mockAdapter.removeClass(MDCSelectFoundation.cssClasses.IS_CHANGING));
-});
 
 test('#setSelectedIndex floats label', () => {
   const {mockAdapter, foundation} = setupTest();