From 3ec39c51b5859c566e40c7ceeb4445990f342bb9 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 16 Nov 2015 16:35:59 -0600 Subject: [PATCH] fix(scroll): fix JS error when scrolling text input --- ionic/components/content/content.ts | 7 +- .../text-input/test/inline-labels/index.ts | 8 +- .../text-input/test/inline-labels/main.html | 120 +++++++++--------- ionic/components/text-input/text-input.ts | 59 +++++---- 4 files changed, 110 insertions(+), 84 deletions(-) diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts index 8e875c55cd..f5058ad2a3 100644 --- a/ionic/components/content/content.ts +++ b/ionic/components/content/content.ts @@ -6,7 +6,6 @@ import {Keyboard} from '../../util/keyboard'; import {ViewController} from '../nav/view-controller'; import {Animation} from '../../animations/animation'; import {ScrollTo} from '../../animations/scroll-to'; -import {FeatureDetect} from '../../util/feature-detect'; /** * The Content component provides an easy to use content area that can be configured to use Ionic's custom Scroll View, or the built in overflow scrolling of the browser. @@ -72,14 +71,16 @@ export class Content extends Ion { } } - onScrollEnd(callback) { + onScrollEnd(callback, debounceWait=400) { let timerId, deregister; function debounce() { + console.debug('onScroll') + clearTimeout(timerId); timerId = setTimeout(() => { deregister(); callback(); - }, 250); + }, debounceWait); } deregister = this.addScrollEventListener(debounce); diff --git a/ionic/components/text-input/test/inline-labels/index.ts b/ionic/components/text-input/test/inline-labels/index.ts index 43aed36502..261c4ab4ca 100644 --- a/ionic/components/text-input/test/inline-labels/index.ts +++ b/ionic/components/text-input/test/inline-labels/index.ts @@ -4,4 +4,10 @@ import {App} from 'ionic/ionic'; @App({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EApp { + + submit(ev) { + debugger + } + +} diff --git a/ionic/components/text-input/test/inline-labels/main.html b/ionic/components/text-input/test/inline-labels/main.html index c2af63da83..0de8380da1 100644 --- a/ionic/components/text-input/test/inline-labels/main.html +++ b/ionic/components/text-input/test/inline-labels/main.html @@ -4,76 +4,80 @@ - +
- - To: - - + - - CC: - - + + To: + + - - From: - - - + + CC: + + - - Comments: - - + + From: + + + - - - Website: - - + + Comments: + + - - - Email: - - + + + Website: + + - - - Feedback: - - + + + Email: + + - - More Info: - - - + + + Feedback: + + - - Score: - - - + + More Info: + + + - - First Name: - - + + Score: + + + - - Last Name: - - + + First Name: + + - - Message: - - + + Last Name: + + - + + Message: + + + + + +
diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts index a3453f52fd..f53c1c0fe0 100644 --- a/ionic/components/text-input/text-input.ts +++ b/ionic/components/text-input/text-input.ts @@ -87,7 +87,7 @@ export class TextInput { self.deregListeners(); if (self.hasFocus) { - + //self.input.hideFocus(); } }; } @@ -315,6 +315,9 @@ export class TextInput { */ focusChange(hasFocus) { this.renderer.setElementClass(this.elementRef, 'has-focus', hasFocus); + if (!hasFocus) { + this.deregListeners(); + } } /** @@ -419,34 +422,46 @@ export class TextInputElement { } relocate(shouldRelocate, inputRelativeY) { - this.clone(shouldRelocate, inputRelativeY); + if (this._relocated !== shouldRelocate) { - if (shouldRelocate) { - this.wrapper.setFocus(); + let focusedInputEle = this.getNativeElement(); + if (shouldRelocate) { + let clonedInputEle = focusedInputEle.cloneNode(true); + clonedInputEle.classList.add('cloned-input'); + clonedInputEle.setAttribute('aria-hidden', true); + clonedInputEle.tabIndex = -1; + focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle); + + focusedInputEle.classList.add('hide-focused-input'); + focusedInputEle.style[dom.CSS.transform] = `translate3d(-9999px,${inputRelativeY}px,0)`; + this.wrapper.setFocus(); + + } else { + focusedInputEle.classList.remove('hide-focused-input'); + focusedInputEle.style[dom.CSS.transform] = ''; + let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-input'); + if (clonedInputEle) { + clonedInputEle.parentNode.removeChild(clonedInputEle); + } + } + + this._relocated = shouldRelocate; } } - clone(shouldClone, inputRelativeY) { + hideFocus() { + console.debug('hideFocus'); let focusedInputEle = this.getNativeElement(); - if (shouldRelocate) { - let clonedInputEle = focusedInputEle.cloneNode(true); - clonedInputEle.classList.add('cloned-input'); - clonedInputEle.setAttribute('aria-hidden', true); - clonedInputEle.tabIndex = -1; - - focusedInputEle.classList.add('hide-focused-input'); - focusedInputEle.style[dom.CSS.transform] = `translate3d(-9999px,${inputRelativeY}px,0)`; - focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle); - - } else { - focusedInputEle.classList.remove('hide-focused-input'); - focusedInputEle.style[dom.CSS.transform] = ''; - let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-input'); - if (clonedInputEle) { - clonedInputEle.parentNode.removeChild(clonedInputEle); - } + let hiddenInputEle = focusedInputEle.parentNode.querySelector('.cloned-hidden'); + if (!hiddenInputEle) { + hiddenInputEle = focusedInputEle.cloneNode(true); + hiddenInputEle.classList.add('cloned-hidden'); + hiddenInputEle.setAttribute('aria-hidden', true); + hiddenInputEle.tabIndex = -1; + focusedInputEle.parentNode.appendChild(hiddenInputEle); } + hiddenInputEle.focus(); } get hasFocus() {