Ionic-framework: Tabbing from ion-input to ion-datetime throws exception

[imgx64]

Ionic version: (check one with "x")
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report

Current behavior:
When an <ion-input> is followed by an <ion-datetime> in a list, pressing Tab throws the below exception:

Runtime Error
Error in ./TextInput class TextInput - caused by: nextInput.initFocus is not a function
Stack
TypeError: nextInput.initFocus is not a function
    at Form.tabFocus (...\ionic-demo\node_modules\ionic-angular\util\form.js:35:34)
    at eval (...\ionic-demo\node_modules\ionic-angular\components\input\input-base.js:153:29)
    at SafeSubscriber.schedulerFn [as _next] (...\ionic-demo\node_modules\@angular\core\src\facade\async.js:101:36)
    at SafeSubscriber.__tryOrUnsub (...\ionic-demo\node_modules\rxjs\Subscriber.js:223:16)
    at SafeSubscriber.next (...\ionic-demo\node_modules\rxjs\Subscriber.js:172:22)
    at Subscriber._next (...\ionic-demo\node_modules\rxjs\Subscriber.js:125:26)
    at Subscriber.next (...\ionic-demo\node_modules\rxjs\Subscriber.js:89:18)
    at EventEmitter.Subject.next (...\ionic-demo\node_modules\rxjs\Subject.js:55:25)
    at EventEmitter.emit (...\ionic-demo\node_modules\@angular\core\src\facade\async.js:81:76)
    at NextInput.receivedFocus (...\ionic-demo\node_modules\ionic-angular\components\input\native-input.js:167:22)

Expected behavior:
Not throwing an exception.

Steps to reproduce:

1. Create a new Ionic v2 project
2. Paste the below code in src/pages/home/home.html
3. Run ionic serve and open in browser
4. Click on 'Name'
5. Press Tab

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label floating>Name</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Date of Birth</ion-label>
      <ion-datetime></ion-datetime>
    </ion-item>
  </ion-list>
</ion-content>

For some reason, I can't reproduce it on Plunker.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

 ordova CLI: 6.4.0
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v4.6.1
Xcode version: Not installed

[imgx64]

The same thing happens if you use <ion-select> and <ion-checkbox> (and possibly other input components) instead of <ion-datetime>.

It also happens if the <ion-datetime> is the first item, and you press Tab from the last item.

[gunterberger]

I have same problem with RC3, when tabbing from ion-input to ion-select. Please help Ionic Team. The problem never existed in RC2?

[corey-garvin]

Same, tabbing from input to toggle
error_handler.js:48 EXCEPTION: Error in ./TextArea class TextArea - inline template:0:184 caused by: nextInput.initFocus is not a function

Not sure if related, but when I scroll while having focus in a textarea/ input, that textarea/input gets duplicated while scrolling.

[petrkotek]

I had this issue with ion-checkbox under 2.0.0-rc.3, but it seems to be fixed in 2.0.0-rc.4! Give it a shot and let us know if it's fixed for the ion-datetime too.

[glashtin]

I have never had this issue until I updated to rc4 and now I am getting it on my ion-input, tab or not just leaving the textbox throws the error. However it is a different end error I guess.

Error in ./TextInput class TextInput - caused by: Cannot read property '_platform' of undefined

Ionic Framework: 2.0.0-rc.4-201612192257
Ionic Native: ^2.2.12
Ionic App Scripts: 0.0.48
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 7.2.1
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

This seems to be in the nightly version only, I went back to just RC4 and it works again.

[vigohe]

Same here with a <ion-input> followed by a <ion-datetime>

Runtime Error
Error in ./TextInput class TextInput - caused by: nextInput.initFocus is not a function

TypeError: nextInput.initFocus is not a function
    at Form.tabFocus (http://localhost:8100/build/main.js:9295:34)
    at http://localhost:8100/build/main.js:107010:29
    at SafeSubscriber.schedulerFn [as _next] (http://localhost:8100/build/main.js:38411:36)
    at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/main.js:1327:16)
    at SafeSubscriber.next (http://localhost:8100/build/main.js:1276:22)
    at Subscriber._next (http://localhost:8100/build/main.js:1229:26)
    at Subscriber.next (http://localhost:8100/build/main.js:1193:18)
    at EventEmitter.Subject.next (http://localhost:8100/build/main.js:4464:25)
    at EventEmitter.emit (http://localhost:8100/build/main.js:38391:76)
    at NextInput.receivedFocus (http://localhost:8100/build/main.js:44069:22)

Ionic Framework: 2.0.0-rc.4
Ionic Native: 2.2.11
Ionic App Scripts: 0.0.47
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 4.2.6
OS Platform: Linux 4.4
Navigator Platform: Linux x86_64
User Agent: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36

[morrisonbrett]

I'm seeing this as well on -rc.4.

[farhaan008]

ionic serve --lab
tab pressed to move next input element throw this error.
I also have the same problem. Anybody have the solution to resolve it.

[tmzblue]

I'm getting this on 2.0.0-rc.5
When tabbing from an ion-input to an ion-select

[IlhamiD]

Also having this issue in version: 2.0.0-rc.3

[morrisonbrett]

Yep. Problem is still there in -rc.5.

[Baadier-Sydow]

Also having this issue in version: 2.0.0-rc.3

[IlhamiD]

Can anyone fix this or is there any workaround?

[theflyingwolves]

It's still there in -rc.5 if you run the app in mobile browser (iOS 10, both chrome and safari in my case). Other platform/browser not tested yet.

[ghost]

Just so you know (I don't mean to bump this thread, only thought it was important)

This also happens if you are using the Keyboard.hideKeyboardAccessoryBar(false) (AKA, if you're using the accessory bar to navigate inputs and the input attempts to select a ion-datetime).

[anthony-ngu]

I'm also seeing this as well :/

[jayordway]

I had the same issue until I used the inputs inside of a form.
https://ionicframework.com/docs/v2/resources/forms/

[andyngdz]

I got same issue now.

[vicenterusso]

Also having this issue in version: 2.2.1

[CraigHarley]

I'm having this issue too, is there a workaround?
Maybe implementing a stub method for nextInput.initFocus?

Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.11 
OS: macOS Sierra
Node Version: v7.0.0
Xcode version: Xcode 8.1 Build version 8B62

[jayordway]

Try putting the tabs inside a form using FormBuilder?

[badpenguin]

Just found it today on 2.1.0

[JBreto]

Same issue here

Other way to reproduce it : In my case it's a form with 3 inputs. The third one is a select. When I try to put the focus (using tab) on the select. It throws the exception.

"error_handler.js:60 TypeError: nextInput.initFocus is not a function".

Node 6.10.0
Cordova : 6.5.0
Ioninc 2.2.1

[enif-lee]

i have same issue when just tab on ionic form.

Below is my environment information.

Ionic Framework: 2.2.0
Ionic Native: 2.8.1
Ionic App Scripts: 1.1.4
Angular Core: 2.4.9
Angular Compiler CLI: 2.4.9
Node: 7.4.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Mobile Safari/537.36

[YassineGherbi]

I found a workaround guys.
It may be not the best solution but it's the only one I know at the moment.

If faced the problem when tabbing from ion-input to ion-select, so I added another ion-input after the first ion-input and added the hidden attr to it.

The keyboard will stay on screen without any visible input focus, so it's still a bit negligent... Let me know if you guys found any other workaround!

(I kept the input attributes on the second ion-input so the keyboard layout doest change from numeric to whatever)

<ion-item>
    <ion-label color="primary">Amount</ion-label>
    <ion-input type="number" inputmode="numeric" pattern="[0-9]+([\.,][0-9]+)?" step="0.01"  formControlName="amount"></ion-input>
</ion-item>
<ion-item hidden>
    <ion-input hidden type="number" inputmode="numeric" pattern="[0-9]+([\.,][0-9]+)?" step="0.01"></ion-input>
</ion-item>

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.4.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[briansg]

Getting this too when tabbing from an ion-input to an ion-select.

Cordova CLI: 6.4.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4

[salazarr-js]

this still happening in 2.2.0 version and in IOS browser, from an ion-input to an ion-select

Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4

[Hanzofm]

Some solution to this problem?

[bangsacerdas]

I got same problem

[astec]

@bangsacerdas there is a nice "thumb up" and "subscribe" functionality" at GitHub. This helps others to get less "me too" noise in their mailboxes.

@Hanzofm milestone for the issue is set to v3.0. So I guess once 3.0 is out we can expect it to be solved.

[Hanzofm]

@astec

On
"ionic-angular": "2.3.0",
"ionic-native": "2.9.0"

I'm still getting this error :

TypeError: nextInput.initFocus is not a function
    at Form.tabFocus (VM74 main.js:13367)
    at VM74 main.js:82223
    at SafeSubscriber.schedulerFn [as _next] (VM74 main.js:49864)
    at SafeSubscriber.__tryOrUnsub (VM74 main.js:111158)
    at SafeSubscriber.next (VM74 main.js:111107)
    at Subscriber._next (VM74 main.js:111049)
    at Subscriber.next (VM74 main.js:111013)
    at EventEmitter.Subject.next (VM74 main.js:28877)
    at EventEmitter.emit (VM74 main.js:49838)
    at NextInput.receivedFocus (VM74 main.js:56115)

[tnovau]

Mee too.

[Hanzofm]

Same problem with ionic 3.0.1 and ionic native 3.4.4. Any idea?

[badpenguin]

Boss, is anyone going to fix this problem? What kind of debugging informations i can provide to help fix this issue?

I've just upgraded to v3 and it's still there.

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.1
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.10
Node Version: v6.10.2
Xcode version: Not installed

[Igor-Baimastruc-Technosoft]

As fo now, we have implemented the following _HACK_.

import { Keyboard } from 'ionic-native'
import { Select } from 'ionic-angular'

export function ionSelectHotfix(){
    (<any>Select.prototype).initFocus = () => {
        console.info('Fake select initFocus. See https://github.com/driftyco/ionic/issues/9328 . We close the keyboard.');
        Keyboard.close();
    }
}

That function is called once when shared module is being initialized.

[Yonn-Trimoreau]

Glad to come here only a few hours after @Igor-Baimastruc-Technosoft did.
This HACK really works, thank you Igor.

Only downside I found is, on Android, the keyboard seems to close twice.. But that's always better than a huge and ugly fatal crash.

[enif-lee]

hi guys, this issue cant reproduce after update ionic 3.1.1!!!!! Is it only my case?

[edmundo096]

Had this same issue with 3.0.0, but after updating to 3.2.0 I can not reproduce the issue anymore when tabbing from a text ion-input to an ion-select.
Tested with Chrome 59 over ionic serve and with a physical Android device.
Probably fixed in 3.1.1 as @lakin32 suggest.

[jgw96]

Hello all! I am going to close this issue for now as I am not able to reproduce this issue anymore. Also, in the next release of Ionic we are planning on introducing alot of keyboard related fixes that should improve things even more. Thanks for using Ionic everyone!

[VTSundar]

Use this in app.scss file

// this will hide the a predefined input tag which will occur when we click tab between ion-input and
ion-datetime or ion-select
[next-input] {
display: none;
}

// this will hide the focus of the ion-input
.focus-outline button:focus, .focus-outline [ion-button]:focus{
border-color: transparent !important;
outline: none !important;
box-shadow: none !important;
}

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.