javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(focus): improve input focus control

Browse Source 
Closes #5536
This commit is contained in:
Adam Bradley
2016-04-14 09:31:09 -05:00
parent 4ba9eb0807
commit e27452b789
7 changed files with 114 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
ionic/components/input/input-base.ts
View File

@ -340,19 +340,17 @@ export class InputBase {
*/
initFocus() {
// begin the process of setting focus to the inner input element
let scrollView = this._scrollView;
var scrollView = this._scrollView;
if (scrollView) {
// this input is inside of a scroll view
// find out if text input should be manually scrolled into view
let ele = this._elementRef.nativeElement;
let itemEle = closest(ele, 'ion-item');
if (itemEle) {
ele = itemEle;
}
let scrollData = InputBase.getScrollData(ele.offsetTop, ele.offsetHeight, scrollView.getContentDimensions(), this._keyboardHeight, this._platform.height());
// get container of this input, probably an ion-item a few nodes up
var ele = this._elementRef.nativeElement;
ele = closest(ele, 'ion-item,[ion-item]') || ele;
var scrollData = InputBase.getScrollData(ele.offsetTop, ele.offsetHeight, scrollView.getContentDimensions(), this._keyboardHeight, this._platform.height());
if (scrollData.scrollAmount > -3 && scrollData.scrollAmount < 3) {
// the text input is in a safe position that doesn't
// require it to be scrolled into view, just set focus now
@ -368,21 +366,22 @@ export class InputBase {
// manually scroll the text input to the top
// do not allow any clicks while it's scrolling
let scrollDuration = getScrollAssistDuration(scrollData.scrollAmount);
var scrollDuration = getScrollAssistDuration(scrollData.scrollAmount);
this._app.setEnabled(false, scrollDuration);
this._nav && this._nav.setTransitioning(true, scrollDuration);
// 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
this._native.relocate(true, scrollData.inputSafeY);
this._native.beginFocus(true, scrollData.inputSafeY);
// scroll the input into place
scrollView.scrollTo(0, scrollData.scrollTo, scrollDuration).then(() => {
// the scroll view is in the correct position now
// give the native text input focus
this._native.relocate(false, 0);
this._native.beginFocus(false, 0);
// ensure this is the focused input
this.setFocus();
// all good, allow clicks again
@ -417,6 +416,7 @@ export class InputBase {
this._form.setAsFocused(this);
// set focus on the actual input element
console.debug(`input-base, setFocus ${this._native.element().value}`);
this._native.setFocus();
// ensure the body hasn't scrolled down