diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js index e410654f26b..130ee00c34c 100644 --- 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 index 868f61d4c66..fa35b2fb0c8 100644 --- 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_', () => {