fix(input): prevent exception when input components outside Content

ionic-team · Dec 14, 2016 · e80f4cf · e80f4cf
1 parent 4f61ea5
commit e80f4cf
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 12 deletions.
diff --git a/src/components/input/input-base.ts b/src/components/input/input-base.ts
@@ -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) {

diff --git a/src/components/input/input.ts b/src/components/input/input.ts
@@ -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();
+    }
   }
 
   /**

diff --git a/src/components/input/test/footer-inputs/app-module.ts b/src/components/input/test/footer-inputs/app-module.ts
@@ -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 {}
diff --git a/src/components/input/test/footer-inputs/e2e.ts b/src/components/input/test/footer-inputs/e2e.ts
@@ -0,0 +1 @@
+
diff --git a/src/components/input/test/footer-inputs/main.html b/src/components/input/test/footer-inputs/main.html
@@ -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>