fix(select): Remove unused JS logic for bottom-line scaleX transform (#1910)

fix(select): Remove unused JS logic for bottom-line scaleX transform and matching test

Author: williamernest

packages/mdc-select/foundation.js

@@ -88,7 +88,6 @@ export default class MDCSelectFoundation extends MDCFoundation {
     /** @private {number} */
     this.animationRequestId_ = 0;
 
-    this.setPointerXOffset_ = (evt) => this.setBottomLineOrigin_(evt);
     this.displayHandler_ = (evt) => {
       evt.preventDefault();
       if (!this.adapter_.isMenuOpen()) {
@@ -123,9 +122,6 @@ export default class MDCSelectFoundation extends MDCFoundation {
       MDCSimpleMenuFoundation.strings.SELECTED_EVENT, this.selectionHandler_);
     this.adapter_.registerMenuInteractionHandler(
       MDCSimpleMenuFoundation.strings.CANCEL_EVENT, this.cancelHandler_);
-    ['mousedown', 'touchstart'].forEach((evtType) => {
-      this.adapter_.registerInteractionHandler(evtType, this.setPointerXOffset_);
-    });
     this.resize();
   }
 
@@ -140,9 +136,6 @@ export default class MDCSelectFoundation extends MDCFoundation {
       MDCSimpleMenuFoundation.strings.SELECTED_EVENT, this.selectionHandler_);
     this.adapter_.deregisterMenuInteractionHandler(
       MDCSimpleMenuFoundation.strings.CANCEL_EVENT, this.cancelHandler_);
-    ['mousedown', 'touchstart'].forEach((evtType) => {
-      this.adapter_.deregisterInteractionHandler(evtType, this.setPointerXOffset_);
-    });
   }
 
   getValue() {
@@ -230,16 +223,6 @@ export default class MDCSelectFoundation extends MDCFoundation {
     });
   }
 
-  setBottomLineOrigin_(evt) {
-    const targetClientRect = evt.target.getBoundingClientRect();
-    const evtCoords = {x: evt.clientX, y: evt.clientY};
-    const normalizedX = evtCoords.x - targetClientRect.left;
-    const attributeString =
-      `transform-origin: ${normalizedX}px bottom`;
-
-    this.adapter_.setBottomLineAttr('style', attributeString);
-  }
-
   setMenuStylesForOpenAtIndex_(index) {
     const innerHeight = this.adapter_.getWindowInnerHeight();
     const {left, top} = this.adapter_.computeBoundingRect();

packages/mdc-select/mdc-select.scss

@@ -144,7 +144,6 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
     left: 0;
     width: 100%;
     height: 1px;
-    transform: scaleY(1);
     transform-origin: bottom;
     transition: $mdc-select-menu-transition;
     background-color: rgba(black, .5);
@@ -167,14 +166,14 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
 
   &__bottom-line--active {
     &::after {
-      transform: scaleX(1);
+      transform: scale(1, 2);
       opacity: 1;
     }
   }
 
   // JS-enhanced and CSS-only Selects require different selectors for focused bottom-line due to different DOM structure
-  &__surface:focus .mdc-select__bottom-line,
-  &__surface:focus ~ .mdc-select__bottom-line {
+  &__surface:focus:not(.mdc-ripple-upgraded) .mdc-select__bottom-line,
+  &__surface:focus:not(.mdc-ripple-upgraded) ~ .mdc-select__bottom-line {
     @include mdc-theme-prop(background-color, primary);
 
     transform: scaleY(2);
@@ -203,10 +202,6 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
   }
 
   .mdc-select__bottom-line {
-    @include mdc-theme-prop(background-color, primary);
-
-    transform: scaleY(2);
-
     &::after {
       opacity: 1;
     }

test/unit/mdc-select/foundation.test.js

@@ -270,77 +270,3 @@ test('#getValue() returns an empty string if selected index < 0', () => {
   const {foundation} = setupTest();
   assert.equal(foundation.getValue(), '');
 });
-
-test('mousedown event sets bottom line origin', () => {
-  const {foundation, mockAdapter} = setupTest();
-  const clickLeftOffset = 50;
-  const mockPointerEvt = td.object({
-    clientX: 100,
-    clientY: 5,
-    target: {
-      getBoundingClientRect: () => {},
-    },
-  });
-  const ctx = td.object({
-    font: 'default font',
-    measureText: () => {},
-  });
-  const paddingRight = 16;
-  const paddingLeft = 20;
-  let pointerDownEventHandler;
-
-  td.when(mockPointerEvt.target.getBoundingClientRect()).thenReturn({left: clickLeftOffset});
-  td.when(mockAdapter.create2dRenderingContext()).thenReturn(ctx);
-  td.when(mockAdapter.getComputedStyleValue('font')).thenReturn(null);
-  td.when(mockAdapter.getComputedStyleValue('font-size')).thenReturn('16px');
-  td.when(mockAdapter.getComputedStyleValue('font-family')).thenReturn('Roboto,sans-serif');
-  td.when(mockAdapter.getComputedStyleValue('letter-spacing')).thenReturn('2.5px');
-  td.when(mockAdapter.getComputedStyleValue('padding-right')).thenReturn(`${paddingRight}px`);
-  td.when(mockAdapter.getComputedStyleValue('padding-left')).thenReturn(`${paddingLeft}px`);
-
-  td.when(mockAdapter.registerInteractionHandler('mousedown', td.matchers.isA(Function))).thenDo((type, handler) => {
-    pointerDownEventHandler = handler;
-  });
-
-  foundation.init();
-  pointerDownEventHandler(mockPointerEvt);
-
-  td.verify(mockAdapter.setBottomLineAttr('style', `transform-origin: ${clickLeftOffset}px bottom`));
-});
-
-test('touchstart event sets bottom line origin', () => {
-  const {foundation, mockAdapter} = setupTest();
-  const clickLeftOffset = 50;
-  const mockPointerEvt = td.object({
-    clientX: 100,
-    clientY: 5,
-    target: {
-      getBoundingClientRect: () => {},
-    },
-  });
-  const ctx = td.object({
-    font: 'default font',
-    measureText: () => {},
-  });
-  const paddingRight = 16;
-  const paddingLeft = 20;
-  let pointerDownEventHandler;
-
-  td.when(mockPointerEvt.target.getBoundingClientRect()).thenReturn({left: clickLeftOffset});
-  td.when(mockAdapter.create2dRenderingContext()).thenReturn(ctx);
-  td.when(mockAdapter.getComputedStyleValue('font')).thenReturn(null);
-  td.when(mockAdapter.getComputedStyleValue('font-size')).thenReturn('16px');
-  td.when(mockAdapter.getComputedStyleValue('font-family')).thenReturn('Roboto,sans-serif');
-  td.when(mockAdapter.getComputedStyleValue('letter-spacing')).thenReturn('2.5px');
-  td.when(mockAdapter.getComputedStyleValue('padding-right')).thenReturn(`${paddingRight}px`);
-  td.when(mockAdapter.getComputedStyleValue('padding-left')).thenReturn(`${paddingLeft}px`);
-
-  td.when(mockAdapter.registerInteractionHandler('touchstart', td.matchers.isA(Function))).thenDo((type, handler) => {
-    pointerDownEventHandler = handler;
-  });
-
-  foundation.init();
-  pointerDownEventHandler(mockPointerEvt);
-
-  td.verify(mockAdapter.setBottomLineAttr('style', `transform-origin: ${clickLeftOffset}px bottom`));
-});