mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
fix(scroll): fix JS error when scrolling text input
This commit is contained in:
@ -6,7 +6,6 @@ import {Keyboard} from '../../util/keyboard';
|
|||||||
import {ViewController} from '../nav/view-controller';
|
import {ViewController} from '../nav/view-controller';
|
||||||
import {Animation} from '../../animations/animation';
|
import {Animation} from '../../animations/animation';
|
||||||
import {ScrollTo} from '../../animations/scroll-to';
|
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.
|
* 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;
|
let timerId, deregister;
|
||||||
|
|
||||||
function debounce() {
|
function debounce() {
|
||||||
|
console.debug('onScroll')
|
||||||
|
clearTimeout(timerId);
|
||||||
timerId = setTimeout(() => {
|
timerId = setTimeout(() => {
|
||||||
deregister();
|
deregister();
|
||||||
callback();
|
callback();
|
||||||
}, 250);
|
}, debounceWait);
|
||||||
}
|
}
|
||||||
|
|
||||||
deregister = this.addScrollEventListener(debounce);
|
deregister = this.addScrollEventListener(debounce);
|
||||||
|
@ -4,4 +4,10 @@ import {App} from 'ionic/ionic';
|
|||||||
@App({
|
@App({
|
||||||
templateUrl: 'main.html'
|
templateUrl: 'main.html'
|
||||||
})
|
})
|
||||||
class E2EApp {}
|
class E2EApp {
|
||||||
|
|
||||||
|
submit(ev) {
|
||||||
|
debugger
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
@ -4,6 +4,8 @@
|
|||||||
|
|
||||||
<ion-content>
|
<ion-content>
|
||||||
|
|
||||||
|
<form (ng-submit)="submit($event)">
|
||||||
|
|
||||||
<ion-list>
|
<ion-list>
|
||||||
|
|
||||||
<ion-input>
|
<ion-input>
|
||||||
@ -76,4 +78,6 @@
|
|||||||
|
|
||||||
</ion-list>
|
</ion-list>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
@ -87,7 +87,7 @@ export class TextInput {
|
|||||||
self.deregListeners();
|
self.deregListeners();
|
||||||
|
|
||||||
if (self.hasFocus) {
|
if (self.hasFocus) {
|
||||||
|
//self.input.hideFocus();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -315,6 +315,9 @@ export class TextInput {
|
|||||||
*/
|
*/
|
||||||
focusChange(hasFocus) {
|
focusChange(hasFocus) {
|
||||||
this.renderer.setElementClass(this.elementRef, 'has-focus', hasFocus);
|
this.renderer.setElementClass(this.elementRef, 'has-focus', hasFocus);
|
||||||
|
if (!hasFocus) {
|
||||||
|
this.deregListeners();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -419,25 +422,19 @@ export class TextInputElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
relocate(shouldRelocate, inputRelativeY) {
|
relocate(shouldRelocate, inputRelativeY) {
|
||||||
this.clone(shouldRelocate, inputRelativeY);
|
if (this._relocated !== shouldRelocate) {
|
||||||
|
|
||||||
if (shouldRelocate) {
|
|
||||||
this.wrapper.setFocus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
clone(shouldClone, inputRelativeY) {
|
|
||||||
let focusedInputEle = this.getNativeElement();
|
let focusedInputEle = this.getNativeElement();
|
||||||
|
|
||||||
if (shouldRelocate) {
|
if (shouldRelocate) {
|
||||||
let clonedInputEle = focusedInputEle.cloneNode(true);
|
let clonedInputEle = focusedInputEle.cloneNode(true);
|
||||||
clonedInputEle.classList.add('cloned-input');
|
clonedInputEle.classList.add('cloned-input');
|
||||||
clonedInputEle.setAttribute('aria-hidden', true);
|
clonedInputEle.setAttribute('aria-hidden', true);
|
||||||
clonedInputEle.tabIndex = -1;
|
clonedInputEle.tabIndex = -1;
|
||||||
|
focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
|
||||||
|
|
||||||
focusedInputEle.classList.add('hide-focused-input');
|
focusedInputEle.classList.add('hide-focused-input');
|
||||||
focusedInputEle.style[dom.CSS.transform] = `translate3d(-9999px,${inputRelativeY}px,0)`;
|
focusedInputEle.style[dom.CSS.transform] = `translate3d(-9999px,${inputRelativeY}px,0)`;
|
||||||
focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
|
this.wrapper.setFocus();
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
focusedInputEle.classList.remove('hide-focused-input');
|
focusedInputEle.classList.remove('hide-focused-input');
|
||||||
@ -447,6 +444,24 @@ export class TextInputElement {
|
|||||||
clonedInputEle.parentNode.removeChild(clonedInputEle);
|
clonedInputEle.parentNode.removeChild(clonedInputEle);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this._relocated = shouldRelocate;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
hideFocus() {
|
||||||
|
console.debug('hideFocus');
|
||||||
|
let focusedInputEle = this.getNativeElement();
|
||||||
|
|
||||||
|
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() {
|
get hasFocus() {
|
||||||
|
Reference in New Issue
Block a user