Keyboard TAB key traversal of input fields

[macav]

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

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
With external keyboard on iOS (or using keyboard in iOS emulator), i'm not able to traverse inputs in the form with TAB key. For a moment it switches the focus to the next field, but then the focus is lost. This is happening in default Ionic2 app created from scratch. However, when I add plugin <plugin name="cordova-plugin-wkwebview-engine" spec="https://github.com/driftyco/cordova-plugin-wkwebview-engine.git"/> , TAB traversal works correctly and as expected.

The issue is there on RC 4 and also in nightly.

Expected behavior:
Tab traversal should be working in a default setup without any special plugin.

Steps to reproduce:

1. ionic start testapp --v2
2. create a simple login form (taken from ionic-conference-app)
3. run iOS emulator
4. make username field focused
5. press TAB to switch to password field

the focus is lost.
Reproducible only in emulator, not on web.

http://plnkr.co/edit/xfTexJHLaW93MPAeHH6K?p=preview

Other information:

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

insert the output from ionic info here

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.3.1
Xcode version: Xcode 8.2 Build version 8C38

[mgersty]

Has this issue been solved?
I am experiencing the same behavior with Android.

Ionic info output
Cordova CLI: 6.5.0
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
ios-deploy version: 1.9.1
ios-sim version: Not installed
OS: OS X El Capitan
Node Version: v7.7.1
Xcode version: Xcode 8.2.1 Build version 8C1002

[mgersty]

Created new issue to highlight this is a bug also with Android
#10990

[maracaipe]

This is happening in v3 too.

[99z]

I'm still seeing this issue. Happens on both Android and iOS when using external keyboards.

Ionic info:

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3 browser 4.1.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.1

System:

    Android SDK Tools : 26.0.2
    ios-deploy        : 1.9.1 
    ios-sim           : 6.0.0 
    Node              : v8.4.0
    npm               : 5.3.0 
    OS                : macOS Sierra
    Xcode             : Xcode 9.0 Build version 9A235 

Misc:

    backend : legacy

[trakhimenok]

@kensodemann, should @niconan create a new issue as it seems closed ones are not tracked for comments?

[kensodemann]

@astec & @niconan - I'll just reopen this one. But yes, it is easy for new comments on closed issues to get lost in the mix.

@niconan - could you provide a sample application was can use for testing via GitHub? That would be super helpful.

[99z]

Thanks for the re-open, @kensodemann. I'll be able to provide a sample application in the coming week hopefully. In the meantime, here's the debug log when running in the iOS simulator:

2017-10-06 09:02:48.201521-0400 [23133:1593187] [LayoutConstraints] Unable to simultaneously satisfy constraints.
	Probably at least one of the constraints in the following list is one you don't want. 
	Try this: 
		(1) look at each constraint and try to figure out which you don't expect; 
		(2) find the code that added the unwanted constraint or constraints and fix it. 
	(Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSAutoresizingMaskLayoutConstraint:0x600000096260 h=--& v=--& UIKeyboardAssistantBar:0x7fb517112080.height == 0   (active)>",
    "<NSLayoutConstraint:0x604000097d40 V:|-(0)-[_UIButtonBarStackView:0x7fb517112db0]   (active, names: '|':UIKeyboardAssistantBar:0x7fb517112080 )>",
    "<NSLayoutConstraint:0x604000097d90 V:[_UIButtonBarStackView:0x7fb517112db0]-(0)-|   (active, names: '|':UIKeyboardAssistantBar:0x7fb517112080 )>",
    "<NSLayoutConstraint:0x600000095f90 'UISV-canvas-connection' UILayoutGuide:0x6040001ae700'UIViewLayoutMarginsGuide'.top == _UILayoutSpacer:0x6000001d8510'UISV-alignment-spanner'.top   (active)>",
    "<NSLayoutConstraint:0x600000097570 'UISV-canvas-connection' UILayoutGuide:0x6040001ae700'UIViewLayoutMarginsGuide'.centerY == _UILayoutSpacer:0x6000001d8510'UISV-alignment-spanner'.centerY   (active)>",
    "<NSLayoutConstraint:0x604000096800 'UIView-bottomMargin-guide-constraint' V:[UILayoutGuide:0x6040001ae700'UIViewLayoutMarginsGuide']-(9)-|   (active, names: '|':_UIButtonBarStackView:0x7fb517112db0 )>",
    "<NSLayoutConstraint:0x604000097480 'UIView-topMargin-guide-constraint' V:|-(10)-[UILayoutGuide:0x6040001ae700'UIViewLayoutMarginsGuide']   (active, names: '|':_UIButtonBarStackView:0x7fb517112db0 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x600000097570 'UISV-canvas-connection' UILayoutGuide:0x6040001ae700'UIViewLayoutMarginsGuide'.centerY == _UILayoutSpacer:0x6000001d8510'UISV-alignment-spanner'.centerY   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!