mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
fix(input): prevent exception when input components outside Content
This commit is contained in:

committed by
Adam Bradley

parent
4f61ea5f9b
commit
e80f4cf88d
@ -1,4 +1,4 @@
|
||||
import { ElementRef, Renderer } from '@angular/core';
|
||||
import { ElementRef, Renderer, Optional } from '@angular/core';
|
||||
import { NgControl } from '@angular/forms';
|
||||
|
||||
import { App } from '../app/app';
|
||||
@ -52,7 +52,7 @@ export class InputBase extends Ion implements IonicFormInput {
|
||||
protected _platform: Platform,
|
||||
elementRef: ElementRef,
|
||||
renderer: Renderer,
|
||||
protected _content: Content,
|
||||
@Optional() protected _content: Content,
|
||||
nav: NavController,
|
||||
ngControl: NgControl,
|
||||
protected _dom: DomController
|
||||
@ -75,12 +75,15 @@ export class InputBase extends Ion implements IonicFormInput {
|
||||
|
||||
_form.register(this);
|
||||
|
||||
this._scrollStart = _content.ionScrollStart.subscribe((ev: ScrollEvent) => {
|
||||
this.scrollHideFocus(ev, true);
|
||||
});
|
||||
this._scrollEnd = _content.ionScrollEnd.subscribe((ev: ScrollEvent) => {
|
||||
this.scrollHideFocus(ev, false);
|
||||
});
|
||||
// only listen to content scroll events if there is content
|
||||
if (_content) {
|
||||
this._scrollStart = _content.ionScrollStart.subscribe((ev: ScrollEvent) => {
|
||||
this.scrollHideFocus(ev, true);
|
||||
});
|
||||
this._scrollEnd = _content.ionScrollEnd.subscribe((ev: ScrollEvent) => {
|
||||
this.scrollHideFocus(ev, false);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
scrollHideFocus(ev: ScrollEvent, shouldHideFocus: boolean) {
|
||||
|
@ -240,8 +240,12 @@ export class TextInput extends InputBase {
|
||||
*/
|
||||
ngOnDestroy() {
|
||||
this._form.deregister(this);
|
||||
this._scrollStart.unsubscribe();
|
||||
this._scrollEnd.unsubscribe();
|
||||
|
||||
// only stop listening to content scroll events if there is content
|
||||
if (this._content) {
|
||||
this._scrollStart.unsubscribe();
|
||||
this._scrollEnd.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -410,8 +414,12 @@ export class TextArea extends InputBase {
|
||||
*/
|
||||
ngOnDestroy() {
|
||||
this._form.deregister(this);
|
||||
this._scrollStart.unsubscribe();
|
||||
this._scrollEnd.unsubscribe();
|
||||
|
||||
// only stop listening to content scroll events if there is content
|
||||
if (this._content) {
|
||||
this._scrollStart.unsubscribe();
|
||||
this._scrollEnd.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
31
src/components/input/test/footer-inputs/app-module.ts
Normal file
31
src/components/input/test/footer-inputs/app-module.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { Component, NgModule } from '@angular/core';
|
||||
import { IonicApp, IonicModule } from '../../../..';
|
||||
|
||||
|
||||
@Component({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
export class E2EPage {
|
||||
}
|
||||
|
||||
@Component({
|
||||
template: '<ion-nav [root]="rootPage"></ion-nav>'
|
||||
})
|
||||
export class E2EApp {
|
||||
rootPage = E2EPage;
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
E2EApp,
|
||||
E2EPage
|
||||
],
|
||||
imports: [
|
||||
IonicModule.forRoot(E2EApp)
|
||||
],
|
||||
bootstrap: [IonicApp],
|
||||
entryComponents: [
|
||||
E2EPage
|
||||
]
|
||||
})
|
||||
export class AppModule {}
|
1
src/components/input/test/footer-inputs/e2e.ts
Normal file
1
src/components/input/test/footer-inputs/e2e.ts
Normal file
@ -0,0 +1 @@
|
||||
|
17
src/components/input/test/footer-inputs/main.html
Normal file
17
src/components/input/test/footer-inputs/main.html
Normal file
@ -0,0 +1,17 @@
|
||||
<ion-header>
|
||||
<ion-navbar>
|
||||
<ion-title>Inputs in footer</ion-title>
|
||||
</ion-navbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<p>TextInput and TextArea components should work outside of a Content component.</p>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
|
||||
<ion-input></ion-input>
|
||||
|
||||
<ion-textarea></ion-textarea>
|
||||
|
||||
</ion-footer>
|
Reference in New Issue
Block a user