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:
- Create a new Ionic v2 project
- Paste the below code in
src/pages/home/home.html
- Run
ionic serve
and open in browser - Click on ‘Name’
- 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)
I’m getting this on 2.0.0-rc.5 When tabbing from an
ion-input
to anion-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.
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)
I’m having this issue too, is there a workaround? Maybe implementing a stub method for nextInput.initFocus?
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 anion-select
. Tested with Chrome 59 overionic 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 :
i have same issue when just tab on ionic form.
Below is my environment information.
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.