bug: Toggle control problem

[mpaland]

Type: bug

Ionic Version: 2.x

Platform: windows app

v2 beta10 shows a strange behavior in my app so I created a test.

I took the ionic menu starter and put the following code in the content section on page 2:

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>Pepperoni</ion-label>
      <ion-toggle [(ngModel)]="pepperoni"></ion-toggle>
    </ion-item>
    <ion-item>
      <ion-label>Sausage</ion-label>
      <ion-toggle [(ngModel)]="sausage"></ion-toggle>
    </ion-item>
    <ion-item>
      <ion-label>Mushrooms</ion-label>
      <ion-toggle [(ngModel)]="mushrooms"></ion-toggle>
    </ion-item>
  </ion-list>
</ion-content>

Reproduce: Copy the code above in Ionic menu starter in page 2. Then: ionic run windows Toggling the button controls doesn't work.

Problem: The problem can only be observed in the windows app. Android and browser platform work fine! Therefore a plunker doesn't make sense. In ios mode the toggle button is moved to the middle on the first click, a second click activates the button but than it's not round anymore. Clicking a button influences other buttons.

See the following screencasts:

Cordova CLI: 6.2.0 Gulp version: CLI version 1.2.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.0.0-beta.32 Ionic App Lib Version: 2.0.0-beta.18 OS: Node Version: v5.6.0

[jgw96]

Hello, thanks for opening an issue with us! I have not gotten a chance to test on windows yet, but just tested on ios and i cant seem to reproduce the issue. What version of IOS are you testing with? Thanks for using Ionic!

[mpaland]

@jgw96 no problem, I own a windows machine but not any iStuff. The issue above appears on a real Windows 10 machine and on a Surface 3 tablet, using ionic as native Windows app. I'm using the 'ios' theme in my test app but no IOS device. As I wrote, this can't be observed in a browser plunkr, just in a native windows app. The toggling mechanism (transition) seems to be very laggy there.

[jgw96]

Ahh ok, thanks for the info!

[alexbainbridge]

I have the same problem, but on Safari on Mac....... But NOT on Chrome on Mac

Using ios theme. Beta 10

[alexbainbridge]

I just found this change made in beta 10 by @brandyscarney https://github.com/driftyco/ionic/issues/7018

Having seen the change it gave me something to investigate, turns out on Safari Web on mac - if I DRAG a toggle (left right), it works OK, but if I click, then you get the impact like the animated gif raised above.

@mpaland If you DRAG on the toggle on windows, does it work OK for you? rather than clicking on the toggle?

[alexbainbridge]

Further steps to recreate

Safari / Mac (Safari is important, it works ok on Chrome on a Mac) http://ionicframework.com/docs/v2/api/components/toggle/Toggle/

On the example on the right on the docs above, click on one of the toggles, click a few times. Now click a second toggle. You will see the initially clicked toggle moves / changes, just like the initial gif.

[mpaland]

@alexbainbridge I tested again. Dragging makes no difference on Windows. Same behavior. But additional info to my initial post: It seems that the buttons DO NOT influence each other! Further more there's a DELAY after clicking a toggle button. Button moves to the middle after clicking/dragging and round about 1-1,5 seconds later it continues to move to the toggle position.

[alexbainbridge]

Ok - sounds similar issue but not exactly the same as what I am seeing

@jgw96 would you like me to create a new issue (specifically for Safari) - or do you wish to keep conversations on this one - and broaden it out to more than just windows?

[jgw96]

Hello @alexbainbridge, thanks for asking! I have tweaked this issue to not being marked as windows specific anymore.

[alexbainbridge]

@jgw96 Hi Justin - have you been able to recreate it - mac / safari / example on public docs?

[jgw96]

Hello @alexbainbridge. I can indeed reproduce with safari on my mac, although i cannot reproduce on ios. I am going to be doing more investigating into exactly why the issue is happening. Thanks for using Ionic!

[alexbainbridge]

@jgw96 There were some changes made to the toggle in version 10..... on click / drag events - not that I like betting, but if I had to bet, thats where I would start !

I mentioned the ref above. Of course, could not be that too :)

[alexbainbridge]

Any chances of this been assigned to an issue milestone? If you can reproduce the issue and its a fairly fundamental UI component, would be great to see it in the queue to be addressed. Thanks!

[alexbainbridge]

Good news, at least in my tests, seems to be fixed in beta 11

[jgw96]

Hello all! I can confirm that this was fixed in beta.11. The issue was related to a safari bug that made events a little weird. Thanks for using Ionic!

[mpaland]

@jgw96 please reopen this issue (and retag it with 'platform:windows', please). It is NOT fixed in beta 11. I tested the app under windows (ionic run windows) with the ios theme and it's still the same behavior as in beta 10.

[alexbainbridge]

@mpaland what form validation type are you using in 11? I was wondering if the fix that I saw in 11 was because of unique name(s) that are needed with multiple toggles, on template style form validation...... rather than it being browser events.

[mpaland]

Hi @alexbainbridge , I'm not using any kind of form validation (at least I removed all for testing this issue). It's just as plain as the code snippet above.

I haven't tried yet, but I'm sure this worked correctly in one of the former betas.

[alexbainbridge]

ok try name="somethingunique" on the toggle...... and if you have multiple toggles, the name has to be unique (but you can auto generate it).......... not saying this will fix it, but you never know :)

[mpaland]

Thanx for giving advice. I've set the name, but it makes no difference.

Another remark: If I set/reset the value of the bound vars directly in code (this.pepperoni = true; this.sausage = true; this.mushrooms = !this.mushrooms;) in the above code, the toggling works fine! No delay. So there must be a (event) problem when clicking/dragging the toggle button.

[alexbainbridge]

OK.... best ask Justin nicely to reopen !

[jgw96]

@mpaland Quick question, is this only happening when using the ios theme on windows? Or does it also happen with the default windows 10 theme?

[mpaland]

Yes, @jgw96 , it happens with all themes. Here's an actual cast of the win app on beta11 with 'md' theme. Clicking the 'All' button sets all values, you can see that the transition is correct then. But clicking on a button has a remarkable 2 sec delay:

[cesarin3134]

Hi everybody , I have the same problem with the ion-toggle on windows phone, when I tap the ion-toogle it become active and then it return automatically return to the initial position. any advice ?? Thanks

[mpaland]

I can't reproduce this issue anymore with RC1 on Edge 38 (14.14393).

[paulovitorjp]

Hello, I am on RC2 and this problem still happens when using platform browser.

When you click on the toggle there is a click effect but it doesn't change, then when you click somewhere else the toggle changes.

To reproduce create a toggle inside an ion-item and then run ionic run browser, then click on the toggle.

ordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.2 Ionic CLI Version: 2.1.13 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.43 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 8.1 Node Version: v6.9.1 Xcode version: Not installed

[cesarin3134]

Hi @paulovitojp , what browser are you using ?

[paulovitorjp]

@cesarin3134 thanks for the quick reply! I am using Chrome Version 55.0.2883.87 m (64-bit)

[mpaland]

@paulovitorjp, can you please try it with ionic nightly?

[paulovitorjp]

@mpaland I used nightly and had the same result, with the only difference that it now only changes after a click on an input. Before it would change after I clicked anywhere else. And now there isn't the click wave effect. Your system information:

Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.4-201701042202 Ionic CLI Version: 2.1.13 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.43 ios-deploy version: 1.9.0 ios-sim version: 5.0.8 OS: macOS Sierra Node Version: v4.6.0 Xcode version: Xcode 7.3.1 Build version 7D1014

[brandyscarney]

Can you try updating the CLI and Ionic App Scripts, removing node_modules and then reinstalling them? Here's what my ionic info looks like testing the conference app:

$ ionic info

Ionic Framework Version: 2.0.0-rc.4-201701042202
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.48-201701041632

$ ionic -v
2.1.18

Also, try running the clean command on your project so you get a fresh build before serving:

$ ionic-app-scripts clean

[lincolnthree]

I have this issue using a toggle that causes a few display changes on the screen. Not only does the toggle delay for about 2 seconds before it finally moves, the entire page display change takes just as long. My guess is that the Angular change detection is what is causing this lag, but I can't be sure.

[paulovitorjp]

@brandyscarney I updated to 2.0.0-rc5 and now it works while using ionic run browser. The only problem is that now if I try to set an ion-input field as disabled (e.g. <ion-input type="text" disabled></ion-input>) the generated input field inside it doesn't have the disabled property and shows as enabled. If I use the [disabled] binding, it only disables the field if I change the bound variable after loading the component. For example: If I create <ion-input type="text" [disabled]="isDisabled"></ion-input> and the value of isDisabled is set to true in the component constructor, the generated input field inside it will be enabled. It will only be disabled if I change the isDisabled to false, and then true again after the component has loaded. The expected behavior would be to have the generated input field be disabled right away, because the variable it binds to is set to true in the component constructor. My workaround was to set timeouts to change the variable after the component has loaded, it is not ideal but has fixed the problem for now.

Your system information:

Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.5 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.48 ios-deploy version: 1.9.0 ios-sim version: 5.0.8 OS: macOS Sierra Node Version: v4.6.0 Xcode version: Xcode 7.3.1 Build version 7D1014

[brandyscarney]

@paulovitorjp That seems like a different issue. Could you create a new issue for that with steps to reproduce?

[mpaland]

@alexbainbridge can you please retest this issue (e.g. with the conference app, filter page) I'm having same trouble in native win app again on latest 3.0.1 and created #11117 but it seem to be a duplicate of this old issue.

[alexbainbridge]

@mpaland Have you see the toggles were refactored in the latest release (yesterday)?

[mpaland]

@alexbainbridge yes and thanks! I saw this change and it seems that it resolved the issue. Toggle works fine now (again) in Edge and in native Windows app with v3.1.1 Anyway there's still a remarkable delay when pressing toggle, menu or tab items in Edge. Other browsers are fine.

[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.