Ionic2 Bug when form is closed by <Enter> key

Ionic Framework ionic-v3
1

I am developing an Ionic2/AngularFIre2 login flow. It is modeled off some existing code but I am added a more complete handling of offline login using localforage. I am seeing the following error:

polyfills.js:3 Uncaught TypeError: Cannot read property 'style' of null
    at Content.addScrollPadding (/Users/emgould/Dev/sharedLifeApp/node_modules/ionic-angular/components/content/content.js:181:28)
    at eval (/Users/emgould/Dev/sharedLifeApp/node_modules/ionic-angular/components/content/content.js:193:23)
    at eval (/Users/emgould/Dev/sharedLifeApp/node_modules/ionic-angular/util/keyboard.js:41:21)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:14215)
    at e.runTask (http://localhost:8100/build/polyfills.js:3:11575)
    at invoke (http://localhost:8100/build/polyfills.js:3:15328)
    at e.args.(anonymous function) (http://localhost:8100/build/polyfills.js:3:2602)

if the user has previously logged in on startup, it will successfully redirect and render without error. If user need to login again then this subscription will fire once the authentication completes successfully. When it does it produces an error on line 181 of Ionic’s content.js:

        > Content.prototype.addScrollPadding = function (newPadding) {
>             (void 0);
>             if (newPadding > this._scrollPadding) {
>                 (void 0);
>                 this._scrollPadding = newPadding;
>                 this._scrollEle.style.paddingBottom = (newPadding > 0) ? newPadding + 'px' : '';
>             }
>         };

THe error is caused because this._scrollEle = null and hence the style assignment fails.

The html template is simple:


Home

<ion-content padding class="home">
<p> Hello </p>
<button ion-button color="light" class="log-in-btn" (click)="logout()">Logout</button>
</ion-content>

The observable code listening for authentication event:
Using ngInit in app.component.ts:
> ngOnInit() {
> this.platform.ready().then(() => {
> // Okay, so the platform is ready and our plugins are available.
> // Here you can do any higher level native things you might need.
> this.auth.getUserData().subscribe(data => {
> this.user = data;
> if (data) {
> this.nav.setRoot(HomePage);
> this.isAppInitialized = true;
> /*
> this.data.list(‘/’+this.user.atoms.toString()).subscribe(data => {
> console.log(data);
> });
> */
> }

Ionic info:
Cordova CLI: 6.4.0
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
ios-deploy version: 1.8.6
ios-sim version: 3.1.1
OS: OS X El Capitan
Node Version: v7.2.0
Xcode version: Xcode 7.3.1 Build version 7D1014

Any thoughts here?

2

Ok. I have done some more debugging. The error occurs when the login form is completed and closed by hitting the “ENTER” key as opposed to clicking on the button.

The stack trace at the time of the problem:

Content.addScrollPadding (content.js:180)
(anonymous function) (content.js:193)
(anonymous function) (keyboard.js:41)
t.invokeTask (polyfills.js:3)
e.runTask (polyfills.js:3)
invoke (polyfills.js:3)
e.args.(anonymous function) (polyfills.js:3)

This is a bug. The keyboard.js function is: checkKeyboard. I am guessing that because this error is occurring while using the chrome browser that this error may not occur when the app is actually installed on a device. I will test this but I believe it is a bug none the less.

1 Like
3

I am getting this error while saving the form with Enter key instead of a button. I’ve also tested on an android device and getting the same error.

Uncaught TypeError: Cannot read property 'style' of null
    at Content.addScrollPadding (\C:\ionic\XXX\node_modules\ionic-angular\components\content\content.js:179:28)
    at eval (\C:\ionic\XXX\node_modules\ionic-angular\components\content\content.js:189:23)
    at eval (\C:\ionic\XXX\node_modules\ionic-angular\util\keyboard.js:39:21)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:14051)
    at e.runTask (http://localhost:8100/build/polyfills.js:3:11411)
    at invoke (http://localhost:8100/build/polyfills.js:3:15164)
4

I modified their library. Couldnt wait for a fix or even a recognition of the issue.

5

What did you do exactly? You modified something in the node_modules?