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

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 <kbd>Tab</kbd> 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 <kbd>Tab</kbd>
<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

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 30
  • Comments: 41 (4 by maintainers)

Most upvoted comments

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

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 <kbd>Tab</kbd> from the last item.

Just found it today on 2.1.0

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

Mee too.

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.

I got same issue now.

I’m also seeing this as well 😕

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

I got same problem

Some solution to this problem?

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

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

Also having this issue in version: 2.2.1

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

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

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

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!

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.

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

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

@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)

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

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

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.

Can anyone fix this or is there any workaround?

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.