Ionic-framework: Windows ion-toggle doesn't toggle until another click has been made on it or another UI element

[joshstrange]

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:
I have an ion-toggle in my windows 10 app and when I first click it it does nothing. If I click it a second time it will toggle OR if I click another UI element (like a button) it will toggle. I do not experience this issue on iOS or Android.

Expected behavior:
Clicking the toggle results in the toggle changing state

Steps to reproduce:
ionic start myapp --v2
Add the following to the home.html page:
<ion-item> <ion-label>Save Password</ion-label> <ion-toggle checked="false"></ion-toggle> </ion-item>

Build for windows:
ionic run windows -- --arch="x64"

Related code:

See above

Other information:
I can't find anything else mentioning this issue. I was seeing android UI (see: #6697) and I thought that might have something to do with it but forcing the windows UI still results in this bug.

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

Your system information:

Cordova CLI: 6.4.0
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: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.2.1
Xcode version: Not installed

[stevenhalase]

I also am running into this bug. However, I have noticed that this issue is also affecting building for the 'browser' platform.

Currently if I run ionic serve or npm run ionic:serve the toggles work as expected.

However, after having added the browser platform using ionic platform add browser and building for browser using ionic build browser the toggles do not work properly. This behavior is also present when building for Windows 10 as well using ionic build windows.

After fairly extensive testing, my suspicion is that events are colliding/interfering, specifically when Cordova is involved.

I testing both using ionic serve and ionic run browser, on a preexisting project as well as a fresh project. Both exhibited the same bug in the browser platform and did not when being served without Cordova using ionic serve.

I did however see that when running from ionic run browser if I use Chrome DevTools to go into Responsive or any mobile device, the bug is not present.

Screen Captures
Preexisting project ionic serve - Works

Preexisting project ionic run browser - Bugged

Fresh project ionic serve - Works

Fresh project ionic run browser - Bugged

To Illustrate what happens in Responsive/Mobile through Chrome DevTools

Code from fresh project (the simplest implementation showing the bug)

This also happens event with only one toggle:

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.9.5
Xcode version: Not installed

[stevenhalase]

@jgw96 Any status on this?

[ionitron-bot[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!