From a69ec36f84c15abb3837a6b8465bfa6e680d9961 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Tue, 27 Feb 2018 17:57:28 +0100
Subject: [PATCH] fix(input): scroll-assist

---
 .../core/src/components/content/content.tsx   |  28 +++--
 .../core/src/components/content/readme.md     |   6 +
 .../components/input-shims/hacks/common.ts    |  96 ++++++++++++++++
 .../input-shims/hacks/hide-caret.ts           | 107 +-----------------
 .../input-shims/hacks/input-blurring.ts       |   7 +-
 .../input-shims/hacks/scroll-assist.ts        |  90 +++++++++++++++
 .../input-shims/hacks/scroll-data.ts          |  81 +++++++------
 .../input-shims/hacks/scroll-padding.ts       |  45 ++++++++
 .../src/components/input-shims/hacks/wip.ts   |  15 ---
 .../components/input-shims/input-shims.tsx    |  46 ++++++--
 .../components/input/test/basic/index.html    |   5 +
 .../popover/animations/ios.enter.ts           |   1 -
 packages/core/src/components/scroll/readme.md |   3 +
 .../core/src/components/scroll/scroll.tsx     |   5 +
 .../src/components/tap-click/tap-click.tsx    |   9 +-
 packages/core/src/global/platform-configs.ts  |   9 +-
 packages/core/src/utils/helpers.ts            |  24 +---
 17 files changed, 374 insertions(+), 203 deletions(-)
 create mode 100644 packages/core/src/components/input-shims/hacks/common.ts
 create mode 100644 packages/core/src/components/input-shims/hacks/scroll-assist.ts
 create mode 100644 packages/core/src/components/input-shims/hacks/scroll-padding.ts

diff --git a/packages/core/src/components/content/content.tsx b/packages/core/src/components/content/content.tsx
index 7f29cb326a..cb88e9233b 100644
--- a/packages/core/src/components/content/content.tsx
+++ b/packages/core/src/components/content/content.tsx
@@ -49,14 +49,6 @@ export class Content {
     this.scrollEl = null;
   }
 
-  hostData() {
-    return {
-      class: {
-        'statusbar-padding': this.config.getBoolean('statusbarPadding')
-      }
-    };
-  }
-
   /**
    * Scroll to the top of the content component.
    *
@@ -79,7 +71,17 @@ export class Content {
     return this.scrollEl.scrollToBottom(duration);
   }
 
-  resize() {
+  @Method()
+  scrollByPoint(x: number, y: number, duration: number, done?: Function): Promise<any> {
+    return this.scrollEl.scrollByPoint(x, y, duration, done);
+  }
+
+  @Method()
+  scrollToPoint(x: number, y: number, duration: number, done?: Function): Promise<any> {
+    return this.scrollEl.scrollToPoint(x, y, duration, done);
+  }
+
+  private resize() {
     if (!this.scrollEl) {
       return;
     }
@@ -114,6 +116,14 @@ export class Content {
     }
   }
 
+  hostData() {
+    return {
+      class: {
+        'statusbar-padding': this.config.getBoolean('statusbarPadding')
+      }
+    };
+  }
+
   render() {
     this.resize();
 
diff --git a/packages/core/src/components/content/readme.md b/packages/core/src/components/content/readme.md
index 3c4622cd0d..b0a2e96a6c 100644
--- a/packages/core/src/components/content/readme.md
+++ b/packages/core/src/components/content/readme.md
@@ -56,6 +56,9 @@ to transparent.
 
 ## Methods
 
+#### scrollByPoint()
+
+
 #### scrollToBottom()
 
 Scroll to the bottom of the content component.
@@ -64,6 +67,9 @@ Duration of the scroll animation in milliseconds. Defaults to `300`.
 Returns a promise which is resolved when the scroll has completed.
 
 
+#### scrollToPoint()
+
+
 #### scrollToTop()
 
 Scroll to the top of the content component.
diff --git a/packages/core/src/components/input-shims/hacks/common.ts b/packages/core/src/components/input-shims/hacks/common.ts
new file mode 100644
index 0000000000..d7f2b7a9a8
--- /dev/null
+++ b/packages/core/src/components/input-shims/hacks/common.ts
@@ -0,0 +1,96 @@
+const RELOCATED_KEY= '$ionRelocated';
+
+export function relocateInput(
+  componentEl: HTMLElement,
+  inputEl: HTMLInputElement,
+  shouldRelocate: boolean,
+  inputRelativeY: number = 0
+) {
+  if ((componentEl as any)[RELOCATED_KEY] === shouldRelocate) {
+    return;
+  }
+  console.debug(`native-input, hideCaret, shouldHideCaret: ${shouldRelocate}, input value: ${inputEl.value}`);
+  if (shouldRelocate) {
+    // this allows for the actual input to receive the focus from
+    // the user's touch event, but before it receives focus, it
+    // moves the actual input to a location that will not screw
+    // up the app's layout, and does not allow the native browser
+    // to attempt to scroll the input into place (messing up headers/footers)
+    // the cloned input fills the area of where native input should be
+    // while the native input fakes out the browser by relocating itself
+    // before it receives the actual focus event
+    // We hide the focused input (with the visible caret) invisiable by making it scale(0),
+    cloneInputComponent(componentEl, inputEl);
+    const tx = document.dir === 'rtl' ? 9999 : -9999;
+    inputEl.style.transform= `translate3d(${tx}px,${inputRelativeY}px,0)`;
+    // TODO
+    // inputEle.style.opacity = '0';
+  } else {
+    removeClone(componentEl, inputEl);
+  }
+  (componentEl as any)[RELOCATED_KEY] = shouldRelocate;
+}
+
+
+export function isFocused(input: HTMLInputElement): boolean {
+  return input === document.activeElement;
+}
+
+function removeClone(componentEl: HTMLElement, inputEl: HTMLElement) {
+  if (componentEl && componentEl.parentElement) {
+    const clonedInputEles = componentEl.parentElement.querySelectorAll('.cloned-input');
+    for (let i = 0; i < clonedInputEles.length; i++) {
+      clonedInputEles[i].parentNode.removeChild(clonedInputEles[i]);
+    }
+    componentEl.style.pointerEvents = '';
+  }
+  (<any>inputEl.style)['transform'] = '';
+  inputEl.style.opacity = '';
+}
+
+function cloneInputComponent(componentEl: HTMLElement, inputEl: HTMLInputElement) {
+  // Make sure we kill all the clones before creating new ones
+  // It is a defensive, removeClone() should do nothing
+  // removeClone(plt, srcComponentEle, srcNativeInputEle);
+  // given a native <input> or <textarea> element
+  // find its parent wrapping component like <ion-input> or <ion-textarea>
+  // then clone the entire component
+  const parentElement = componentEl.parentElement;
+  if (componentEl && parentElement) {
+    // DOM READ
+    const srcTop = componentEl.offsetTop;
+    const srcLeft = componentEl.offsetLeft;
+    const srcWidth = componentEl.offsetWidth;
+    const srcHeight = componentEl.offsetHeight;
+
+    // DOM WRITE
+    // not using deep clone so we don't pull in unnecessary nodes
+    const clonedComponentEle = document.createElement('div');
+    const clonedStyle = clonedComponentEle.style;
+    clonedComponentEle.classList.add(...Array.from(componentEl.classList));
+    clonedComponentEle.classList.add('cloned-input');
+    clonedComponentEle.setAttribute('aria-hidden', 'true');
+    clonedStyle.pointerEvents = 'none';
+    clonedStyle.position = 'absolute';
+    clonedStyle.top = srcTop + 'px';
+    clonedStyle.left = srcLeft + 'px';
+    clonedStyle.width = srcWidth + 'px';
+    clonedStyle.height = srcHeight + 'px';
+
+    const clonedInputEl = document.createElement('input');
+    clonedInputEl.classList.add(...Array.from(inputEl.classList));
+    // Object.assign(clonedInputEl, input);
+    //const clonedInputEl = <HTMLInputElement>inputEl.cloneNode(false);
+    clonedInputEl.value = inputEl.value;
+    clonedInputEl.type = inputEl.type;
+    clonedInputEl.placeholder = inputEl.placeholder;
+
+    clonedInputEl.tabIndex = -1;
+
+    clonedComponentEle.appendChild(clonedInputEl);
+    parentElement.appendChild(clonedComponentEle);
+
+    componentEl.style.pointerEvents = 'none';
+  }
+  inputEl.style.transform = 'scale(0)';
+}
diff --git a/packages/core/src/components/input-shims/hacks/hide-caret.ts b/packages/core/src/components/input-shims/hacks/hide-caret.ts
index a18590b429..5b0702dce7 100644
--- a/packages/core/src/components/input-shims/hacks/hide-caret.ts
+++ b/packages/core/src/components/input-shims/hacks/hide-caret.ts
@@ -1,7 +1,7 @@
+import { isFocused, relocateInput } from "./common";
 
-const RELOCATED_KEY= '$ionRelocated';
 
-export default function enableHideCaretOnScroll(componentEl: HTMLElement, inputEl: HTMLInputElement, scrollEl: HTMLIonScrollElement, keyboardHeight: number) {
+export default function enableHideCaretOnScroll(componentEl: HTMLElement, inputEl: HTMLInputElement, scrollEl: HTMLIonScrollElement) {
   if(!scrollEl || !inputEl) {
     return () => {};
   }
@@ -10,11 +10,11 @@ export default function enableHideCaretOnScroll(componentEl: HTMLElement, inputE
   const scrollHideCaret = (shouldHideCaret: boolean) => {
     // console.log('scrollHideCaret', shouldHideCaret)
     if (isFocused(inputEl)) {
-      relocateInput(componentEl, inputEl, keyboardHeight, shouldHideCaret);
+      relocateInput(componentEl, inputEl, shouldHideCaret);
     }
   };
 
-  const onBlur = () => relocateInput(componentEl, inputEl, keyboardHeight, false);
+  const onBlur = () => relocateInput(componentEl, inputEl, false);
   const hideCaret = () => scrollHideCaret(true);
   const showCaret = () => scrollHideCaret(false);
 
@@ -28,102 +28,3 @@ export default function enableHideCaretOnScroll(componentEl: HTMLElement, inputE
     inputEl.addEventListener('ionBlur', onBlur);
   };
 }
-
-
-function removeClone(componentEl: HTMLElement, inputEl: HTMLElement) {
-  if (componentEl && componentEl.parentElement) {
-    const clonedInputEles = componentEl.parentElement.querySelectorAll('.cloned-input');
-    for (let i = 0; i < clonedInputEles.length; i++) {
-      clonedInputEles[i].parentNode.removeChild(clonedInputEles[i]);
-    }
-    componentEl.style.pointerEvents = '';
-  }
-  (<any>inputEl.style)['transform'] = '';
-  inputEl.style.opacity = '';
-}
-
-function cloneInputComponent(componentEl: HTMLElement, inputEl: HTMLInputElement) {
-  // Make sure we kill all the clones before creating new ones
-  // It is a defensive, removeClone() should do nothing
-  // removeClone(plt, srcComponentEle, srcNativeInputEle);
-  // given a native <input> or <textarea> element
-  // find its parent wrapping component like <ion-input> or <ion-textarea>
-  // then clone the entire component
-  const parentElement = componentEl.parentElement;
-  if (componentEl && parentElement) {
-    // DOM READ
-    const srcTop = componentEl.offsetTop;
-    const srcLeft = componentEl.offsetLeft;
-    const srcWidth = componentEl.offsetWidth;
-    const srcHeight = componentEl.offsetHeight;
-
-    // DOM WRITE
-    // not using deep clone so we don't pull in unnecessary nodes
-    const clonedComponentEle = document.createElement('div');
-    const clonedStyle = clonedComponentEle.style;
-    clonedComponentEle.classList.add(...Array.from(componentEl.classList));
-    clonedComponentEle.classList.add('cloned-input');
-    clonedComponentEle.setAttribute('aria-hidden', 'true');
-    clonedStyle.pointerEvents = 'none';
-    clonedStyle.position = 'absolute';
-    clonedStyle.top = srcTop + 'px';
-    clonedStyle.left = srcLeft + 'px';
-    clonedStyle.width = srcWidth + 'px';
-    clonedStyle.height = srcHeight + 'px';
-
-    const clonedInputEl = document.createElement('input');
-    clonedInputEl.classList.add(...Array.from(inputEl.classList));
-    // Object.assign(clonedInputEl, input);
-    //const clonedInputEl = <HTMLInputElement>inputEl.cloneNode(false);
-    clonedInputEl.value = inputEl.value;
-    clonedInputEl.type = inputEl.type;
-
-    clonedInputEl.tabIndex = -1;
-
-    clonedComponentEle.appendChild(clonedInputEl);
-    parentElement.appendChild(clonedComponentEle);
-
-    componentEl.style.pointerEvents = 'none';
-  }
-  inputEl.style.transform = 'scale(0)';
-}
-
-function relocateInput(
-  componentEl: HTMLElement,
-  inputEle: HTMLInputElement,
-  _keyboardHeight: number,
-  shouldRelocate: boolean
-) {
-  console.log('relocateInput',shouldRelocate );
-  if ((componentEl as any)[RELOCATED_KEY] === shouldRelocate) {
-    return;
-  }
-  console.debug(`native-input, hideCaret, shouldHideCaret: ${shouldRelocate}, input value: ${inputEle.value}`);
-  if (shouldRelocate) {
-    // this allows for the actual input to receive the focus from
-    // the user's touch event, but before it receives focus, it
-    // moves the actual input to a location that will not screw
-    // up the app's layout, and does not allow the native browser
-    // to attempt to scroll the input into place (messing up headers/footers)
-    // the cloned input fills the area of where native input should be
-    // while the native input fakes out the browser by relocating itself
-    // before it receives the actual focus event
-    // We hide the focused input (with the visible caret) invisiable by making it scale(0),
-    cloneInputComponent(componentEl, inputEle);
-    // TODO
-    // const inputRelativeY = getScrollData(componentEl, inputEle, keyboardHeight).scrollAmount;
-    // const inputRelativeY = 9999;
-    // fix for #11817
-    const tx = document.dir === 'rtl' ? 9999 : -9999;
-    inputEle.style.transform= `translate3d(${tx}px,${0}px,0)`;
-    // inputEle.style.opacity = '0';
-
-  } else {
-    removeClone(componentEl, inputEle);
-  }
-  (componentEl as any)[RELOCATED_KEY] = shouldRelocate;
-}
-
-function isFocused(input: HTMLInputElement): boolean {
-  return input === document.activeElement;
-}
diff --git a/packages/core/src/components/input-shims/hacks/input-blurring.ts b/packages/core/src/components/input-shims/hacks/input-blurring.ts
index da217e5bd1..9cef8ac51f 100644
--- a/packages/core/src/components/input-shims/hacks/input-blurring.ts
+++ b/packages/core/src/components/input-shims/hacks/input-blurring.ts
@@ -11,9 +11,6 @@ export default function enableInputBlurring(app: App) {
     focused = true;
   }
 
-  document.addEventListener('focusin', onFocusin, true);
-  document.addEventListener('touchend', onTouchend, false);
-
   function onTouchend(ev: any) {
     // if app did scroll return early
     if (app.didScroll) {
@@ -51,6 +48,10 @@ export default function enableInputBlurring(app: App) {
       }
     }, 50);
   }
+
+  document.addEventListener('focusin', onFocusin, true);
+  document.addEventListener('touchend', onTouchend, false);
+
   return () => {
     document.removeEventListener('focusin', onFocusin, true);
     document.removeEventListener('touchend', onTouchend, false);
diff --git a/packages/core/src/components/input-shims/hacks/scroll-assist.ts b/packages/core/src/components/input-shims/hacks/scroll-assist.ts
new file mode 100644
index 0000000000..8a314bc3e5
--- /dev/null
+++ b/packages/core/src/components/input-shims/hacks/scroll-assist.ts
@@ -0,0 +1,90 @@
+import { pointerCoord } from "../../../utils/helpers";
+import { relocateInput, isFocused } from "./common";
+import { getScrollData } from "./scroll-data";
+
+
+export default function enableScrollAssist(
+  componentEl: HTMLElement,
+  inputEl: HTMLInputElement,
+  contentEl: HTMLIonContentElement,
+  keyboardHeight: number
+) {
+  let coord: any;
+  const touchStart = (ev: UIEvent) => {
+    coord = pointerCoord(ev);
+    console.debug(`input-base, pointerStart, type: ${ev.type}`);
+  };
+
+  const touchEnd = (ev: UIEvent) => {
+    // input cover touchend/mouseup
+    console.debug(`input-base, pointerEnd, type: ${ev.type}`);
+    if (!coord) {
+      return;
+    }
+    // get where the touchend/mouseup ended
+    const endCoord = pointerCoord(ev);
+
+    // focus this input if the pointer hasn't moved XX pixels
+    // and the input doesn't already have focus
+    if (!hasPointerMoved(6, coord, endCoord) && !isFocused(inputEl)) {
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      // begin the input focus process
+      jsSetFocus(componentEl, inputEl, contentEl, keyboardHeight);
+    }
+  };
+  componentEl.addEventListener('touchstart', touchStart, true);
+  componentEl.addEventListener('touchend', touchEnd, true);
+
+  return () => {
+    componentEl.removeEventListener('touchstart', touchStart, true);
+    componentEl.removeEventListener('touchend', touchEnd, true);
+  };
+}
+
+function jsSetFocus(
+  componentEl: HTMLElement,
+  inputEl: HTMLInputElement,
+  contentEl: HTMLIonContentElement,
+  keyboardHeight: number
+) {
+  const scrollData = getScrollData(componentEl, contentEl, keyboardHeight);
+  if (Math.abs(scrollData.scrollAmount) < 4) {
+    // the text input is in a safe position that doesn't
+    // require it to be scrolled into view, just set focus now
+    inputEl.focus();
+    return;
+  }
+
+  // temporarily move the focus to the focus holder so the browser
+  // doesn't freak out while it's trying to get the input in place
+  // at this point the native text input still does not have focus
+  relocateInput(componentEl, inputEl, true, scrollData.inputSafeY);
+  inputEl.focus();
+
+  // scroll the input into place
+  contentEl.scrollByPoint(0, scrollData.scrollAmount, scrollData.scrollDuration, () => {
+    // the scroll view is in the correct position now
+    // give the native text input focus
+    relocateInput(componentEl, inputEl, false, scrollData.inputSafeY);
+
+    // ensure this is the focused input
+    inputEl.focus();
+  });
+}
+
+function hasPointerMoved(threshold: number, startCoord: PointerCoordinates, endCoord: PointerCoordinates) {
+  if (startCoord && endCoord) {
+    const deltaX = (startCoord.x - endCoord.x);
+    const deltaY = (startCoord.y - endCoord.y);
+    const distance = deltaX * deltaX + deltaY * deltaY;
+    return distance > (threshold * threshold);
+  }
+  return false;
+}
+
+export interface PointerCoordinates {
+  x?: number;
+  y?: number;
+}
diff --git a/packages/core/src/components/input-shims/hacks/scroll-data.ts b/packages/core/src/components/input-shims/hacks/scroll-data.ts
index 7342d219f4..98d55945ca 100644
--- a/packages/core/src/components/input-shims/hacks/scroll-data.ts
+++ b/packages/core/src/components/input-shims/hacks/scroll-data.ts
@@ -5,41 +5,7 @@ export interface ScrollData {
   scrollAmount: number;
   scrollPadding: number;
   scrollDuration: number;
-}
-
-export function calcScrollData(
-  inputRect: ClientRect,
-  contentRect: ClientRect,
-  keyboardHeight: number,
-  plaformHeight: number
-): ScrollData {
-  // compute input's Y values relative to the body
-  const inputTop = inputRect.top;
-  const inputBottom = inputRect.bottom;
-
-  // compute safe area
-  const safeAreaTop = contentRect.top;
-  const safeAreaBottom = Math.min(contentRect.bottom, plaformHeight - keyboardHeight);
-
-  // figure out if each edge of teh input is within the safe area
-  const distanceToBottom = safeAreaBottom - inputBottom;
-  const distanceToTop = safeAreaTop - inputTop;
-
-  const scrollAmount = Math.round((distanceToBottom < 0 )
-    ? distanceToBottom
-    : (distanceToTop < 0 )
-    ? distanceToTop
-    : 0);
-
-  const distance = Math.abs(scrollAmount);
-  const duration = distance / SCROLL_ASSIST_SPEED;
-  const scrollDuration = Math.min(400, Math.max(150, duration));
-
-  return  {
-    scrollAmount,
-    scrollDuration,
-    scrollPadding: keyboardHeight,
-  };
+  inputSafeY: number;
 }
 
 export function getScrollData(componentEl: HTMLElement, contentEl: HTMLElement, keyboardHeight: number): ScrollData {
@@ -48,6 +14,7 @@ export function getScrollData(componentEl: HTMLElement, contentEl: HTMLElement,
       scrollAmount: 0,
       scrollPadding: 0,
       scrollDuration: 0,
+      inputSafeY: 0,
     };
   }
   // const scrollData = (componentEl as any)[SCROLL_DATA_KEY];
@@ -63,4 +30,46 @@ export function getScrollData(componentEl: HTMLElement, contentEl: HTMLElement,
   );
   // (componentEl as any)[SCROLL_DATA_KEY] = newScrollData;
   return newScrollData;
-}
\ No newline at end of file
+}
+
+
+function calcScrollData(
+  inputRect: ClientRect,
+  contentRect: ClientRect,
+  keyboardHeight: number,
+  plaformHeight: number
+): ScrollData {
+  // compute input's Y values relative to the body
+  const inputTop = inputRect.top;
+  const inputBottom = inputRect.bottom;
+
+  // compute visible area
+  const visibleAreaTop = contentRect.top;
+  const visibleAreaBottom = Math.min(contentRect.bottom, plaformHeight - keyboardHeight);
+
+  // compute safe area
+  const safeAreaTop = visibleAreaTop + 10;
+  const safeAreaBottom = visibleAreaBottom / 2.0;
+
+  // figure out if each edge of teh input is within the safe area
+  const distanceToBottom = safeAreaBottom - inputBottom;
+  const distanceToTop = safeAreaTop - inputTop;
+
+  // The scrollAmount is the negated distance to the safe area.
+  const scrollAmount = Math.round((distanceToBottom < 0)
+    ? -distanceToBottom
+    : (distanceToTop > 0)
+    ? -distanceToTop
+    : 0);
+
+  const distance = Math.abs(scrollAmount);
+  const duration = distance / SCROLL_ASSIST_SPEED;
+  const scrollDuration = Math.min(400, Math.max(150, duration));
+
+  return  {
+    scrollAmount,
+    scrollDuration,
+    scrollPadding: keyboardHeight,
+    inputSafeY: -(inputTop - safeAreaTop) + 4
+  };
+}
diff --git a/packages/core/src/components/input-shims/hacks/scroll-padding.ts b/packages/core/src/components/input-shims/hacks/scroll-padding.ts
new file mode 100644
index 0000000000..fc3f1deb69
--- /dev/null
+++ b/packages/core/src/components/input-shims/hacks/scroll-padding.ts
@@ -0,0 +1,45 @@
+const PADDING_TIMER_KEY = '$ionPaddingTimer';
+
+export default function enableScrollPadding(keyboardHeight: number) {
+  console.debug('Input: enableInputBlurring');
+
+  function onFocusin(ev: any) {
+    setScrollPadding(ev.target, keyboardHeight);
+  }
+  function onFocusout(ev: any) {
+    setScrollPadding(ev.target, 0);
+  }
+
+  document.addEventListener('focusin', onFocusin);
+  document.addEventListener('focusout', onFocusout);
+
+  return () => {
+    document.removeEventListener('focusin', onFocusin);
+    document.removeEventListener('focusout', onFocusout);
+  };
+}
+
+function setScrollPadding(input: HTMLElement, keyboardHeight: number) {
+  if (input.tagName !== 'INPUT') {
+    return;
+  }
+  if (input.parentElement.tagName === 'ION-INPUT') {
+    return;
+  }
+  const el = input.closest('.scroll-inner') as HTMLElement;
+  if (!el) {
+    return;
+  }
+  const timer = (el as any)[PADDING_TIMER_KEY];
+  if (timer) {
+    clearTimeout(timer);
+  }
+
+  if (keyboardHeight > 0) {
+    el.style.paddingBottom = keyboardHeight + 'px';
+  } else {
+    (el as any)[PADDING_TIMER_KEY] = setTimeout(() => {
+      el.style.paddingBottom = '';
+    }, 120)
+  }
+}
diff --git a/packages/core/src/components/input-shims/hacks/wip.ts b/packages/core/src/components/input-shims/hacks/wip.ts
index ac426b4c4b..73c84fb90b 100644
--- a/packages/core/src/components/input-shims/hacks/wip.ts
+++ b/packages/core/src/components/input-shims/hacks/wip.ts
@@ -1,19 +1,4 @@
 
-// export function enableScrollPadding(componentEl: HTMLElement, inputEl: HTMLElement, contentEl: HTMLElement, keyboardHeight: number) {
-//   console.debug('Input: enableScrollPadding');
-//   debugger;
-//   const onFocus = () => {
-//     const scrollPadding = getScrollData(componentEl, contentEl, keyboardHeight).scrollPadding;
-//     contentEl.addScrollPadding(scrollPadding);
-//     content.clearScrollPaddingFocusOut();
-//   };
-//   inputEl.addEventListener('focus', onFocus);
-
-//   return () => {
-//     inputEl.removeEventListener('focus', onFocus);
-//   };
-// }
-
 // export function enableScrollMove(
 //   componentEl: HTMLElement,
 //   inputEl: HTMLElement,
diff --git a/packages/core/src/components/input-shims/input-shims.tsx b/packages/core/src/components/input-shims/input-shims.tsx
index 9d32f4a565..0d27665c59 100644
--- a/packages/core/src/components/input-shims/input-shims.tsx
+++ b/packages/core/src/components/input-shims/input-shims.tsx
@@ -3,6 +3,13 @@ import { App, Config } from "../..";
 
 import enableHideCaretOnScroll from "./hacks/hide-caret";
 import enableInputBlurring from "./hacks/input-blurring";
+import enableScrollAssist from "./hacks/scroll-assist";
+import enableScrollPadding from "./hacks/scroll-padding";
+
+const INPUT_BLURRING = true;
+const SCROLL_ASSIST = true;
+const SCROLL_PADDING = true;
+const HIDE_CARET = true;
 
 @Component({
   tag: 'ion-input-shims',
@@ -11,21 +18,29 @@ export class InputShims {
 
   private didLoad = false;
   private hideCaret = false;
+  private scrollAssist = false;
   private keyboardHeight = 0;
   private hideCaretMap = new WeakMap<HTMLElement, Function>();
+  private scrollAssistMap = new WeakMap<HTMLElement, Function>();
 
   @Prop({context: 'config'}) config: Config;
   @Prop() app: App;
 
   componentDidLoad() {
-    this.keyboardHeight = this.config.getNumber('keyboardHeight', 200);
+    this.keyboardHeight = this.config.getNumber('keyboardHeight', 290);
+    this.scrollAssist = this.config.getBoolean('scrollAssist', true);
     this.hideCaret = this.config.getBoolean('hideCaretOnScroll', true);
 
     const inputBlurring = this.config.getBoolean('inputBlurring', true);
-    if (inputBlurring) {
+    if (inputBlurring && INPUT_BLURRING) {
       enableInputBlurring(this.app);
     }
 
+    const scrollPadding = this.config.getBoolean('scrollPadding', true);
+    if (scrollPadding && SCROLL_PADDING) {
+      enableScrollPadding(this.keyboardHeight);
+    }
+
     // Input might be already loaded in the DOM before ion-device-hacks did.
     // At this point we need to look for all the ion-inputs not registered yet
     // and register them.
@@ -53,21 +68,32 @@ export class InputShims {
   }
 
   private registerInput(componentEl: HTMLElement) {
-    if (this.hideCaret && !this.hideCaretMap.has(componentEl)) {
-      const rmFn = enableHideCaretOnScroll(
-        componentEl,
-        componentEl.querySelector('input'),
-        componentEl.closest('ion-scroll'),
-        this.keyboardHeight
-      );
+    const inputEl = componentEl.querySelector('input');
+    const scrollEl = componentEl.closest('ion-scroll');
+    const contentEl = componentEl.closest('ion-content');
+
+    if (HIDE_CARET && this.hideCaret && !this.hideCaretMap.has(componentEl)) {
+      const rmFn = enableHideCaretOnScroll(componentEl, inputEl, scrollEl);
       this.hideCaretMap.set(componentEl, rmFn);
     }
+
+    if (SCROLL_ASSIST && this.scrollAssist && !this.scrollAssistMap.has(componentEl)) {
+      const rmFn = enableScrollAssist(componentEl, inputEl, contentEl, this.keyboardHeight);
+      this.scrollAssistMap.set(componentEl, rmFn);
+    }
   }
 
   private unregisterInput(componentEl: HTMLElement) {
-    if (this.hideCaret) {
+    if (HIDE_CARET && this.hideCaret) {
       const fn = this.hideCaretMap.get(componentEl);
       fn && fn();
+      this.hideCaretMap.delete(componentEl);
+    }
+
+    if (SCROLL_ASSIST && this.scrollAssist) {
+      const fn = this.scrollAssistMap.get(componentEl);
+      fn && fn();
+      this.scrollAssistMap.delete(componentEl);
     }
   }
 }
diff --git a/packages/core/src/components/input/test/basic/index.html b/packages/core/src/components/input/test/basic/index.html
index d380cbf32e..d9bdeb3767 100644
--- a/packages/core/src/components/input/test/basic/index.html
+++ b/packages/core/src/components/input/test/basic/index.html
@@ -87,6 +87,11 @@
           </ion-button>
         </div>
 
+        <ion-item>
+          <ion-label>Clear Input</ion-label>
+          <ion-input clear-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
+        </ion-item>
+
       </ion-content>
     </ion-page>
 
diff --git a/packages/core/src/components/popover/animations/ios.enter.ts b/packages/core/src/components/popover/animations/ios.enter.ts
index 03412823a4..da47803c38 100644
--- a/packages/core/src/components/popover/animations/ios.enter.ts
+++ b/packages/core/src/components/popover/animations/ios.enter.ts
@@ -4,7 +4,6 @@ import { Animation } from '../../../index';
  * iOS Popover Enter Animation
  */
 export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise<Animation> {
-  debugger;
   let originY = 'top';
   let originX = 'left';
 
diff --git a/packages/core/src/components/scroll/readme.md b/packages/core/src/components/scroll/readme.md
index e196cabee1..e95cb9286d 100644
--- a/packages/core/src/components/scroll/readme.md
+++ b/packages/core/src/components/scroll/readme.md
@@ -86,6 +86,9 @@ Emitted when the scroll has started.
 
 ## Methods
 
+#### scrollByPoint()
+
+
 #### scrollToBottom()
 
 
diff --git a/packages/core/src/components/scroll/scroll.tsx b/packages/core/src/components/scroll/scroll.tsx
index 1bbd14d861..cf7a40c1a4 100644
--- a/packages/core/src/components/scroll/scroll.tsx
+++ b/packages/core/src/components/scroll/scroll.tsx
@@ -117,6 +117,11 @@ export class Scroll {
     return this.scrollToPoint(0, y, duration);
   }
 
+  @Method()
+  scrollByPoint(x: number, y: number, duration: number, done?: Function): Promise<any> {
+    return this.scrollToPoint(x + this.el.scrollLeft, y + this.el.scrollTop, duration, done);
+  }
+
   @Method()
   scrollToPoint(x: number, y: number, duration: number, done?: Function): Promise<any> {
     // scroll animation loop w/ easing
diff --git a/packages/core/src/components/tap-click/tap-click.tsx b/packages/core/src/components/tap-click/tap-click.tsx
index b27a1f3c0e..90371979e5 100644
--- a/packages/core/src/components/tap-click/tap-click.tsx
+++ b/packages/core/src/components/tap-click/tap-click.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, EventListenerEnable, Listen, Prop } from '@stencil/core';
-import { now, pointerCoordX, pointerCoordY } from '../../utils/helpers';
+import { now, pointerCoord } from '../../utils/helpers';
 
 
 @Component({
@@ -110,8 +110,7 @@ export class TapClick {
     clearTimeout(this.activeDefer);
     this.activeDefer = null;
 
-    const eventX = pointerCoordX(ev);
-    const eventY = pointerCoordY(ev);
+    const {x, y} = pointerCoord(ev);
 
     // unactivate selected
     if (activatableEle) {
@@ -119,7 +118,7 @@ export class TapClick {
         throw new Error('internal error');
       }
       if (!activatableEle.classList.contains(ACTIVATED)) {
-        this.addActivated(activatableEle, eventX, eventY);
+        this.addActivated(activatableEle, x, y);
       }
       this.removeActivated(true);
     }
@@ -134,7 +133,7 @@ export class TapClick {
 
       el.classList.remove(ACTIVATED);
       this.activeDefer = setTimeout(() => {
-        this.addActivated(el, eventX, eventY);
+        this.addActivated(el, x, y);
         this.activeDefer = null;
       }, ADD_ACTIVATED_DEFERS);
     }
diff --git a/packages/core/src/global/platform-configs.ts b/packages/core/src/global/platform-configs.ts
index 3d13b419d9..9db5afcfea 100644
--- a/packages/core/src/global/platform-configs.ts
+++ b/packages/core/src/global/platform-configs.ts
@@ -22,6 +22,9 @@ export const PLATFORM_CONFIGS: PlatformConfig[] = [
 
   {
     name: IPAD,
+    settings: {
+      keyboardHeight: 500,
+    },
     isMatch: (url, userAgent) => isPlatformMatch(url, userAgent, IPAD, [IPAD], WINDOWS_PHONE)
   },
 
@@ -33,9 +36,10 @@ export const PLATFORM_CONFIGS: PlatformConfig[] = [
   {
     name: IOS,
     settings: {
-      mode: "ios",
+      mode: 'ios',
       tabsHighlight: false,
       statusbarPadding: isCordova(),
+      keyboardHeight: 250,
       isDevice: true,
       deviceHacks: true,
     },
@@ -45,8 +49,9 @@ export const PLATFORM_CONFIGS: PlatformConfig[] = [
   {
     name: ANDROID,
     settings: {
-      isDevice: true,
       mode: 'md',
+      isDevice: true,
+      keyboardHeight: 300,
     },
     isMatch: (url, userAgent) => isPlatformMatch(url, userAgent, ANDROID, [ANDROID, 'silk'], WINDOWS_PHONE)
   },
diff --git a/packages/core/src/utils/helpers.ts b/packages/core/src/utils/helpers.ts
index 34fc2a1557..7ea8f2b47e 100644
--- a/packages/core/src/utils/helpers.ts
+++ b/packages/core/src/utils/helpers.ts
@@ -69,19 +69,20 @@ export function now(ev: UIEvent) {
   return ev.timeStamp || Date.now();
 }
 
-export function pointerCoordX(ev: any): number {
+export function pointerCoord(ev: any): {x: number, y: number} {
   // get X coordinates for either a mouse click
   // or a touch depending on the given event
   if (ev) {
     const changedTouches = ev.changedTouches;
     if (changedTouches && changedTouches.length > 0) {
-      return changedTouches[0].clientX;
+      const touch = changedTouches[0];
+      return {x: touch.clientX, y: touch.clientY};
     }
     if (ev.pageX !== undefined) {
-      return ev.pageX;
+      return {x: ev.pageX, y: ev.pageY};
     }
   }
-  return 0;
+  return {x: 0, y: 0};
 }
 
 export function updateDetail(ev: any, detail: any) {
@@ -104,21 +105,6 @@ export function updateDetail(ev: any, detail: any) {
   detail.currentY = y;
 }
 
-export function pointerCoordY(ev: any): number {
-  // get Y coordinates for either a mouse click
-  // or a touch depending on the given event
-  if (ev) {
-    const changedTouches = ev.changedTouches;
-    if (changedTouches && changedTouches.length > 0) {
-      return changedTouches[0].clientY;
-    }
-    if (ev.pageY !== undefined) {
-      return ev.pageY;
-    }
-  }
-  return 0;
-}
-
 export type ElementRef = 'child' | 'parent' | 'body' | 'document' | 'window';
 
 export function getElementReference(el: any, ref: ElementRef) {