fix(input): fix floating/stacked label relocate

ionic/components/input/input-base.ts

@@ -40,7 +40,7 @@ export class InputBase {
     protected _nav: NavController,
     ngControl: NgControl
   ) {
-    this._useAssist = true;// config.get('scrollAssist');
+    this._useAssist = config.get('scrollAssist');
     this._keyboardHeight = config.get('keyboardHeight');
 
     if (ngControl) {
@@ -67,6 +67,7 @@ export class InputBase {
 
     self._scrollMove = function(ev: UIEvent) {
       // scroll move event listener this instance can reuse
+      console.log('scrollmove', ev)
       if (!(self._nav && self._nav.isTransitioning())) {
         self.deregScrollMove();
 
@@ -130,7 +131,7 @@ export class InputBase {
     if (val) {
       val = val.toLowerCase();
 
-      if (/password|email|number|search|tel|url|date|datetime|datetime-local|month/.test(val)) {
+      if (/password|email|number|search|tel|url|date|datetime|datetime-local|month|time|week/.test(val)) {
         this._type = val;
       }
     }

ionic/components/input/input.ios.scss

@@ -40,6 +40,12 @@ $text-input-ios-input-clear-icon-size:     18px !default;
   margin-bottom: 8px;
 }
 
+.item-label-floating .text-input.cloned-input,
+.item-label-stacked .text-input.cloned-input {
+  top: 30px;
+}
+
+
 // iOS Clear Input Icon
 // --------------------------------------------------
 

ionic/components/input/input.md.scss

@@ -71,6 +71,14 @@ ion-input.ng-invalid.ng-touched:after {
   margin-bottom: 8px;
 }
 
+.item-label-floating .text-input.cloned-input {
+  top: 32px;
+}
+
+.item-label-stacked .text-input.cloned-input {
+  top: 27px;
+}
+
 
 // Material Design Clear Input Icon
 // --------------------------------------------------

ionic/components/input/input.scss

@@ -7,11 +7,10 @@ ion-input,
 ion-textarea {
   display: block;
   flex: 1;
+  width: 100%;
 }
 
 
-
-
 // Textarea Within An Item
 // --------------------------------------------------
 
@@ -108,9 +107,12 @@ input.text-input:-webkit-autofill {
 // Cloned Input
 // --------------------------------------------------
 
-.text-input.cloned-input,
+.text-input.cloned-input {
-.text-input.cloned-hidden {
   position: absolute;
   top: 0;
   pointer-events: none;
 }
+
+.item-input:not(.item-label-floating) .text-input.cloned-active {
+  display: none;
+}

ionic/components/input/native-input.ts

@@ -62,11 +62,13 @@ export class NativeInput {
    * @private
    */
   relocate(shouldRelocate: boolean, inputRelativeY: number) {
+    console.debug('native input relocate', shouldRelocate, inputRelativeY);
+
     if (this._relocated !== shouldRelocate) {
 
       let focusedInputEle = this.element();
       if (shouldRelocate) {
-        let clonedInputEle = cloneInput(focusedInputEle, 'cloned-input');
+        let clonedInputEle = cloneInput(focusedInputEle, 'cloned-focus');
 
         focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
         focusedInputEle.style[CSS.transform] = `translate3d(-9999px,${inputRelativeY}px,0)`;
@@ -75,15 +77,15 @@ export class NativeInput {
         this.setFocus();
 
         raf(() => {
-          focusedInputEle.style.display = 'none';
+          focusedInputEle.classList.add('cloned-active');
         });
 
       } else {
+        focusedInputEle.classList.remove('cloned-active');
         focusedInputEle.style[CSS.transform] = '';
-        focusedInputEle.style.display = '';
         focusedInputEle.style.opacity = '';
 
-        removeClone(focusedInputEle, 'cloned-input');
+        removeClone(focusedInputEle, 'cloned-focus');
       }
 
       this._relocated = shouldRelocate;
@@ -94,18 +96,19 @@ export class NativeInput {
    * @private
    */
   hideFocus(shouldHideFocus: boolean) {
+    console.debug('native input hideFocus', shouldHideFocus);
+
     let focusedInputEle = this.element();
 
     if (shouldHideFocus) {
-      let clonedInputEle = cloneInput(focusedInputEle, 'cloned-hidden');
+      let clonedInputEle = cloneInput(focusedInputEle, 'cloned-move');
 
-      focusedInputEle.style.display = 'none';
+      focusedInputEle.classList.add('cloned-active');
       focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
 
     } else {
-      focusedInputEle.style.display = '';
+      focusedInputEle.classList.remove('cloned-active');
-
+      removeClone(focusedInputEle, 'cloned-move');
-      removeClone(focusedInputEle, 'cloned-hidden');
     }
   }
 
@@ -128,6 +131,7 @@ export class NativeInput {
 
 function cloneInput(focusedInputEle, addCssClass) {
   let clonedInputEle = focusedInputEle.cloneNode(true);
+  clonedInputEle.classList.add('cloned-input');
   clonedInputEle.classList.add(addCssClass);
   clonedInputEle.setAttribute('aria-hidden', true);
   clonedInputEle.removeAttribute('aria-labelledby');