fix(text-field): Send client position to line ripple for touch events (…

…#4084)
material-components · Nov 14, 2018 · 95c0a98 · 95c0a98
1 parent c640d50
commit 95c0a98
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
@@ -243,9 +243,14 @@ class MDCTextFieldFoundation extends MDCFoundation {
    * @param {!Event} evt
    */
   setTransformOrigin(evt) {
-    const targetClientRect = evt.target.getBoundingClientRect();
-    const evtCoords = {x: evt.clientX, y: evt.clientY};
-    const normalizedX = evtCoords.x - targetClientRect.left;
+    let targetEvent;
+    if (evt.touches) {
+      targetEvent = evt.touches[0];
+    } else {
+      targetEvent = evt;
+    }
+    const targetClientRect = targetEvent.target.getBoundingClientRect();
+    const normalizedX = targetEvent.clientX - targetClientRect.left;
     this.adapter_.setLineRippleTransformOrigin(normalizedX);
   }
 

diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
@@ -772,14 +772,18 @@ test('mousedown on the input sets the line ripple origin', () => {
 
 test('touchstart on the input sets the line ripple origin', () => {
   const {foundation, mockAdapter} = setupTest();
-  const mockEvt = {
-    target: {
-      getBoundingClientRect: () => {
-        return {};
+  const clientRectLeft = 50;
+  const clientX = 200;
+  const mockTouchStartEvent = {
+    touches: [{
+      target: {
+        getBoundingClientRect: () => {
+          return {left: clientRectLeft};
+        },
       },
-    },
-    clientX: 200,
-    clientY: 200,
+      clientX: clientX,
+      clientY: 200,
+    }],
   };
 
   let clickHandler;
@@ -788,9 +792,10 @@ test('touchstart on the input sets the line ripple origin', () => {
     .thenDo((evtType, handler) => clickHandler = handler);
 
   foundation.init();
-  clickHandler(mockEvt);
+  clickHandler(mockTouchStartEvent);
 
-  td.verify(mockAdapter.setLineRippleTransformOrigin(td.matchers.anything()));
+  const argMatcher = td.matchers.argThat((normalizedX) => (normalizedX === (clientX - clientRectLeft)));
+  td.verify(mockAdapter.setLineRippleTransformOrigin(argMatcher));
 });
 
 test('on validation attribute change calls styleValidity_', () => {