Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-13290] iOS: Ti.UI.Switch disappears when scrolling TableView

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionCannot Reproduce
Resolution Date2014-04-23T18:14:47.000+0000
Affected Version/sn/a
Fix Version/sRelease 3.4.0
ComponentsiOS
Labelsios, iphone
ReporterCarter Lathrop
AssigneePedro Enrique
Created2013-03-26T16:52:00.000+0000
Updated2017-03-29T16:18:35.000+0000

Description

*Problem* When quickly scrolling down a tableview the switches, in this case the topmost switch, inside the rows, disappears. You have to scroll back very slow to make them appear again. *Steps to Reproduce* 1. Use Ti SDK 3.0.0 or 3.0.2 2. Copy and paste provided code in app.js 3. Run on iOS simulator 6.0 or 6.1 4. Scroll down quickly so that the switches moves off the screen (at the top) 5. Repeat step 4 until the top switch disappears on return to viewing all 3 switches 6. Slowly scroll upwards from bottom most position in order to for switch to reappear
var rnav = Ti.UI.createButton({
    backgroundImage: "img/nav/close.png",
    width: 40,
    height: 31
});

rnav.addEventListener("click", function(){
    title: "click"
});

wNav = Ti.UI.createWindow({
    navBarHidden: true
});

var w = Ti.UI.createWindow({
    backgroundColor:'#fff',
    rightNavButton: rnav,
    backgroundColor: "#e1e1e1"
});

var s0 = Ti.UI.createTableViewSection({
    headerTitle: "Perfil"
});

var s01 = Ti.UI.createTableViewSection({
    headerTitle: "Notificações"
});

var s1 = Ti.UI.createTableViewSection({
    headerTitle: "Sobre"
});

var s2 = Ti.UI.createTableViewSection();

var profileChange = Ti.UI.createTableViewRow({
    title: L("Meu Perfil"),
    hasChild: true,
    backgroundColor: "#fff"
});

s0.add(profileChange);

var passChange = Ti.UI.createTableViewRow({
    title: L("Mudar Senha"),
    hasChild: true,
    backgroundColor: "#fff"
});

s0.add(passChange);

var notifPush = Ti.UI.createTableViewRow({
    title: "Push notifications",
    backgroundColor: "#fff",
    height: 43
});

var pushSwitch = Titanium.UI.createSwitch({
    value: 1,
    right: 15
}, function(){
    chparams();
});

notifPush.add(pushSwitch);

var soundPush = Ti.UI.createTableViewRow({
    title: "Som de alerta",
    backgroundColor: "#fff",
    height: 43
});

var soundPushSwitch = Titanium.UI.createSwitch({
    value: 1,
    right: 15
});

soundPush.add(soundPushSwitch);

var notifMail = Ti.UI.createTableViewRow({
    title: "Email",
    backgroundColor: "#fff",
    height: 43
});

var mailSwitch =  Titanium.UI.createSwitch({
    value: 1,
    right: 15
});

notifMail.add(mailSwitch);

s01.add(notifPush);
s01.add(soundPush);
s01.add(notifMail);

var aboutFeedback = Ti.UI.createTableViewRow({
    title: "Feedback",
    hasChild: true,
    backgroundColor: "#fff"
});

var aboutTell = Ti.UI.createTableViewRow({
    title: "Chame seus amigos!",
    hasChild: true,
    backgroundColor: "#fff"
});

var aboutFAQ = Ti.UI.createTableViewRow({
    title: "Perguntas & Respostas (FAQ)",
    hasChild: true,
    backgroundColor: "#fff"
});

var aboutTerms = Ti.UI.createTableViewRow({
    title: "Termos & Condições de Uso",
    hasChild: true,
    backgroundColor: "#fff"
});

var aboutPrivacy = Ti.UI.createTableViewRow({
    title: "Política de Privacidade",
    hasChild: true,
    backgroundColor: "#fff"
});

var aboutUs = Ti.UI.createTableViewRow({
    title: "About",
    hasChild: true,
    backgroundColor: "#fff"
});

s1.add(aboutFeedback);
s1.add(aboutTell);
s1.add(aboutFAQ);
s1.add(aboutTerms);
s1.add(aboutPrivacy);
s1.add(aboutUs);
    
var logout = Ti.UI.createTableViewRow({
    //backgroundImage: "img/dashboard/signout.png",
    backgroundColor: "#fff",
    height: 43,
    width: 302,
    selectionStyle: Ti.UI.iPhone.TableViewCellSelectionStyle.NONE
});
s2.add(logout); 
    
var tableView = Ti.UI.createTableView({
    backgroundColor: "transparent",
    separatorColor: "#666",
    style: Ti.UI.iPhone.TableViewStyle.GROUPED,
    data: [s0,s01,s1,s2]
});

w.add(tableView);

w.open();
*Expected Result* Switch does not disappear when scrolled down *Actual Result* On occasion, switch disappears when scrolled down and switch is out of sight *Notes*: This seems to only be an issue when there are switches within tableViewSections and this only occurs when tableView is large enough such that on scroll, the switches are not visible on screen. When tested without extra rows and switches are constantly in view, I could not reproduce the bug.

Comments

  1. Jamie Buckley 2013-03-26

    Hi Daniel, Please can you provide some more information on this issue: - Titanium Studio Version - XCode version Can you also provide a small reproducible test case so this issue can be tested.
  2. Daniel Hansson 2013-03-26

    Hi Jamie, Here's the info: *Titanium Studio: build: 3.0.2.201302191606 *XCODE: Version 4.6.1 (4H512) Here's also a 'not so small' test case but anyway. {noformat} Window = function() { var rnav = Ti.UI.createButton({ backgroundImage: "img/nav/close.png", width: 40, height: 31 }); rnav.addEventListener("click", function(){ title: "click" }); wNav = Ti.UI.createWindow({ navBarHidden: true }); var w = Ti.UI.createWindow({ backgroundColor:'#fff', rightNavButton: rnav, backgroundColor: "#e1e1e1" }); settingsNav = Ti.UI.iPhone.createNavigationGroup({ window: w }); wNav.add(settingsNav); var s0 = Ti.UI.createTableViewSection({ headerTitle: "Perfil" }); var s01 = Ti.UI.createTableViewSection({ headerTitle: "Notificações" }); var s1 = Ti.UI.createTableViewSection({ headerTitle: "Sobre" }); var s2 = Ti.UI.createTableViewSection(); // Fields var profileChange = Ti.UI.createTableViewRow({ title: L("Meu Perfil"), hasChild: true, backgroundColor: "#fff" }); profileChange.addEventListener("click", function(){ //var pr = require("sets")("profile"); //CM.settingsNav.open(pr); }); s0.add(profileChange); var passChange = Ti.UI.createTableViewRow({ title: L("Mudar Senha"), hasChild: true, backgroundColor: "#fff" }); passChange.addEventListener("click", function(){ //var pr = require("sets")("passwd"); //CM.settingsNav.open(pr); }); s0.add(passChange); var notifPush = Ti.UI.createTableViewRow({ title: "Push notifications", backgroundColor: "#fff", height: 40 }); var pushSwitch = Titanium.UI.createSwitch({ value: 1, right: 15 }, function(){ chparams(); }); notifPush.add(pushSwitch); var soundPush = Ti.UI.createTableViewRow({ title: "Som de alerta", backgroundColor: "#fff", height: 40 }); var soundPushSwitch = Titanium.UI.createSwitch({ value: 1, right: 15 }, function(){ chparams(); }); soundPush.add(soundPushSwitch); pushSwitch.addEventListener('change', function(e){ e.value ? soundPushSwitch.setEnabled(true) : soundPushSwitch.setEnabled(false); }); var notifMail = Ti.UI.createTableViewRow({ title: "Email", backgroundColor: "#fff", height: 40 }); var mailSwitch = Titanium.UI.createSwitch({ value: 1, right: 15 }, function() { chparams(); }); notifMail.add(mailSwitch); s01.add(notifPush); s01.add(soundPush); s01.add(notifMail); var aboutFeedback = Ti.UI.createTableViewRow({ title: "Feedback", hasChild: true, backgroundColor: "#fff" }); aboutFeedback.addEventListener("click", function(){ var email = Ti.UI.createEmailDialog(); email.subject = "Feedback"; email.toRecipients = ['feedback@pinion.com.br']; email.messageBody = L('Escreva aqui sua opinião, crítica ou sugestão!'); email.open(); }); var aboutTell = Ti.UI.createTableViewRow({ title: "Chame seus amigos!", hasChild: true, backgroundColor: "#fff" }); var tellOpt = Ti.UI.createAlertDialog({ cancel: 2, destructive: 2, title: "Chamar amigos por:", options: ['Facebook', 'Twitter', 'Cancelar'] }); tellOpt.addEventListener("click", function(e){ switch(e.index){ case 0: social.facebook({ text: "Acabei de instalar o PiniOn! Agora eu posso cumprir missões e ganhar dinheiro de forma fácil e rápida.", image: "http://www.pinion.com.br/fb.jpg", url: "http://www.pinion.com.br" }); break; case 1: social.twitter({ text: "Acabei de instalar o PiniOn! Agora eu posso cumprir missões e ganhar dinheiro de forma fácil e rápida.", url: "http://www.pinion.com.br" }); break; } }); aboutTell.addEventListener("click", function(){ tellOpt.show(); }); var aboutFAQ = Ti.UI.createTableViewRow({ title: "Perguntas & Respostas (FAQ)", hasChild: true, backgroundColor: "#fff" }); aboutFAQ.addEventListener("click", function(){ //var sets = require("sets")("faq"); //CM.settingsNav.open(sets); }); var aboutTerms = Ti.UI.createTableViewRow({ title: "Termos & Condições de Uso", hasChild: true, backgroundColor: "#fff" }); aboutTerms.addEventListener("click", function(){ //var sets = require("sets")("terms"); //CM.settingsNav.open(sets); }); var aboutPrivacy = Ti.UI.createTableViewRow({ title: "Política de Privacidade", hasChild: true, backgroundColor: "#fff" }); aboutPrivacy.addEventListener("click", function(){ //var sets = require("sets")("privacy"); //CM.settingsNav.open(sets); }); var aboutUs = Ti.UI.createTableViewRow({ title: "About", hasChild: true, backgroundColor: "#fff" }); aboutUs.addEventListener("click", function(){ //var sets = require("sets")("about"); //CM.settingsNav.open(sets); }); s1.add(aboutFeedback); s1.add(aboutTell); s1.add(aboutFAQ); s1.add(aboutTerms); s1.add(aboutPrivacy); s1.add(aboutUs); var logout = Ti.UI.createTableViewRow({ backgroundImage: "img/dashboard/signout.png", backgroundColor: "transparent", height: 43, width: 302, selectionStyle: Ti.UI.iPhone.TableViewCellSelectionStyle.NONE }); logout.addEventListener("click", function(){ Ti.App.Properties.removeProperty("user"); //api.user = null; var lastLoginType = Ti.App.Properties.getString("lastLoginType", null); services.stopPush(); if (lastLoginType == "fb") { Ti.App.Properties.removeProperty("lastLoginType"); setTimeout(function(){ Ti.Facebook.logout(); }, 800); } else { Ti.App.Properties.removeProperty("lastLoginType"); setTimeout(function(){ //CM.updateLoginStatus(); }, 800); } wNav.close(); }); s2.add(logout); var tableView = Ti.UI.createTableView({ backgroundColor: "transparent", separatorColor: "#666", style: Ti.UI.iPhone.TableViewStyle.GROUPED, data: [s0,s01,s1,s2] }); w.add(tableView); w.addEventListener("blur", function(){ //api.upUser(); }); } module.exports = Window; {noformat}
  3. Carter Lathrop 2013-03-28

    Code provided is a bit long to test with. Made my own test case which reflects the issue described:
       var win = Ti.UI.createWindow({
       	backgroundColor : 'white',
       	fullscreen : true
       });
       
       var tableData = [];
       var table = Titanium.UI.createTableView({
       	layout: 'vertical'
       });
       
       for (var i = 0; i <= 20; i++) {
       	var row = Ti.UI.createTableViewRow({
       		title : 'row' + i,
       		className : 'row',
       		objName : 'row',
       		height : 100
       	});
       
       	var basicSwitch = Ti.UI.createSwitch({
       		value : true
       	});
       	
       	row.add(basicSwitch);
       	tableData.push(row);
       }
       
       table.setData(tableData);
       win.add(table);
       win.open();
       
       
    unable to reproduce. Regards, Carter
  4. Daniel Hansson 2013-03-28

    Thanks @Carter. I will produce a more light version of the code snippet I sent above.
  5. Carter Lathrop 2013-03-28

    @Daniel, Ok will reopen and review upon your reply. Thanks for being patient. For future reference on getting quick reviews and processing to engineering: https://wiki.appcelerator.org/display/guides/How+to+Submit+a+Bug+Report -Carter
  6. Daniel Hansson 2013-03-28

    @Carter. Here is a more light version with the same problem (not that frequently though). Here you can see that the problem can be related with the tableviewsections. {noformat} var rnav = Ti.UI.createButton({ backgroundImage: "img/nav/close.png", width: 40, height: 31 }); rnav.addEventListener("click", function(){ title: "click" }); wNav = Ti.UI.createWindow({ navBarHidden: true }); var w = Ti.UI.createWindow({ backgroundColor:'#fff', rightNavButton: rnav, backgroundColor: "#e1e1e1" }); wNav.add(settingsNav); var s0 = Ti.UI.createTableViewSection({ headerTitle: "Perfil" }); var s01 = Ti.UI.createTableViewSection({ headerTitle: "Notificações" }); var s1 = Ti.UI.createTableViewSection({ headerTitle: "Sobre" }); var s2 = Ti.UI.createTableViewSection(); // Fields var profileChange = Ti.UI.createTableViewRow({ title: L("Meu Perfil"), hasChild: true, backgroundColor: "#fff" }); s0.add(profileChange); var passChange = Ti.UI.createTableViewRow({ title: L("Mudar Senha"), hasChild: true, backgroundColor: "#fff" }); s0.add(passChange); var notifPush = Ti.UI.createTableViewRow({ title: "Push notifications", backgroundColor: "#fff", height: 43 }); var pushSwitch = Titanium.UI.createSwitch({ value: 1, right: 15 }, function(){ chparams(); }); notifPush.add(pushSwitch); var soundPush = Ti.UI.createTableViewRow({ title: "Som de alerta", backgroundColor: "#fff", height: 43 }); var soundPushSwitch = Titanium.UI.createSwitch({ value: 1, right: 15 }); soundPush.add(soundPushSwitch); var notifMail = Ti.UI.createTableViewRow({ title: "Email", backgroundColor: "#fff", height: 43 }); var mailSwitch = Titanium.UI.createSwitch({ value: 1, right: 15 }); notifMail.add(mailSwitch); s01.add(notifPush); s01.add(soundPush); s01.add(notifMail); var aboutFeedback = Ti.UI.createTableViewRow({ title: "Feedback", hasChild: true, backgroundColor: "#fff" }); var aboutTell = Ti.UI.createTableViewRow({ title: "Chame seus amigos!", hasChild: true, backgroundColor: "#fff" }); var aboutFAQ = Ti.UI.createTableViewRow({ title: "Perguntas & Respostas (FAQ)", hasChild: true, backgroundColor: "#fff" }); var aboutTerms = Ti.UI.createTableViewRow({ title: "Termos & Condições de Uso", hasChild: true, backgroundColor: "#fff" }); var aboutPrivacy = Ti.UI.createTableViewRow({ title: "Política de Privacidade", hasChild: true, backgroundColor: "#fff" }); var aboutUs = Ti.UI.createTableViewRow({ title: "About", hasChild: true, backgroundColor: "#fff" }); s1.add(aboutFeedback); s1.add(aboutTell); s1.add(aboutFAQ); s1.add(aboutTerms); s1.add(aboutPrivacy); s1.add(aboutUs); var logout = Ti.UI.createTableViewRow({ //backgroundImage: "img/dashboard/signout.png", backgroundColor: "#fff", height: 43, width: 302, selectionStyle: Ti.UI.iPhone.TableViewCellSelectionStyle.NONE }); s2.add(logout); var tableView = Ti.UI.createTableView({ backgroundColor: "transparent", separatorColor: "#666", style: Ti.UI.iPhone.TableViewStyle.GROUPED, data: [s0,s01,s1,s2] }); w.add(tableView); w.open(); {noformat}
  7. Carter Lathrop 2013-03-28

    @Daniel, I can't seem to reproduce this. I tested on iOS simulator 6.0 and everything seems to be working fine. Can you please provide more info? What Ti SDK are you using, what Ti build, a clear set of steps to reproduce etc. Also would you mind adding this test case to the bug description so that we have a clear record of the issue at hand. Maybe I am missing something or am on a different build that is experiencing this? For reference on what to provide to ensure a thorough review: https://wiki.appcelerator.org/display/guides/How+to+Submit+a+Bug+Report Thanks, Carter
  8. Carter Lathrop 2013-03-28

    Woops, my mistake I see now that you have provided the SDK and iOS versions. Will test on them momentarily. -Carter
  9. Carter Lathrop 2013-03-28

    @Daniel, I was able to reproduce the possible bug on 3.0.2GA and with iOS 6.0 (6.1 is not yet supported) but the code is still too large. Try to get it down to under 100 lines in order to be considered a viable test case. The bug needs to be properly isolated before being deemed an issue. Thanks for your patience, Carter
  10. Daniel Hansson 2013-03-29

    @Carter, Ok, I will get it down under 100 lines. Sending ASAP. Thanks Daniel
  11. Daniel Hansson 2013-04-01

    @Carter. It been difficult to get it down under 100 lines because I need many sections and rows to make it scroll. But please try with this code here on 3.0.0GA(IOS6.1). {noformat} var rnav = Ti.UI.createButton({ backgroundImage: "img/nav/close.png", width: 40, height: 31 }); rnav.addEventListener("click", function(){ title: "click" }); wNav = Ti.UI.createWindow({ navBarHidden: true }); var w = Ti.UI.createWindow({ backgroundColor:'#fff', rightNavButton: rnav, backgroundColor: "#e1e1e1" }); var s0 = Ti.UI.createTableViewSection({ headerTitle: "Perfil" }); var s01 = Ti.UI.createTableViewSection({ headerTitle: "Notificações" }); var s1 = Ti.UI.createTableViewSection({ headerTitle: "Sobre" }); var s2 = Ti.UI.createTableViewSection(); var profileChange = Ti.UI.createTableViewRow({ title: L("Meu Perfil"), hasChild: true, backgroundColor: "#fff" }); s0.add(profileChange); var passChange = Ti.UI.createTableViewRow({ title: L("Mudar Senha"), hasChild: true, backgroundColor: "#fff" }); s0.add(passChange); var notifPush = Ti.UI.createTableViewRow({ title: "Push notifications", backgroundColor: "#fff", height: 43 }); var pushSwitch = Titanium.UI.createSwitch({ value: 1, right: 15 }, function(){ chparams(); }); notifPush.add(pushSwitch); var soundPush = Ti.UI.createTableViewRow({ title: "Som de alerta", backgroundColor: "#fff", height: 43 }); var soundPushSwitch = Titanium.UI.createSwitch({ value: 1, right: 15 }); soundPush.add(soundPushSwitch); var notifMail = Ti.UI.createTableViewRow({ title: "Email", backgroundColor: "#fff", height: 43 }); var mailSwitch = Titanium.UI.createSwitch({ value: 1, right: 15 }); notifMail.add(mailSwitch); s01.add(notifPush); s01.add(soundPush); s01.add(notifMail); var aboutFeedback = Ti.UI.createTableViewRow({ title: "Feedback", hasChild: true, backgroundColor: "#fff" }); var aboutTell = Ti.UI.createTableViewRow({ title: "Chame seus amigos!", hasChild: true, backgroundColor: "#fff" }); var aboutFAQ = Ti.UI.createTableViewRow({ title: "Perguntas & Respostas (FAQ)", hasChild: true, backgroundColor: "#fff" }); var aboutTerms = Ti.UI.createTableViewRow({ title: "Termos & Condições de Uso", hasChild: true, backgroundColor: "#fff" }); var aboutPrivacy = Ti.UI.createTableViewRow({ title: "Política de Privacidade", hasChild: true, backgroundColor: "#fff" }); var aboutUs = Ti.UI.createTableViewRow({ title: "About", hasChild: true, backgroundColor: "#fff" }); s1.add(aboutFeedback); s1.add(aboutTell); s1.add(aboutFAQ); s1.add(aboutTerms); s1.add(aboutPrivacy); s1.add(aboutUs); var logout = Ti.UI.createTableViewRow({ //backgroundImage: "img/dashboard/signout.png", backgroundColor: "#fff", height: 43, width: 302, selectionStyle: Ti.UI.iPhone.TableViewCellSelectionStyle.NONE }); s2.add(logout); var tableView = Ti.UI.createTableView({ backgroundColor: "transparent", separatorColor: "#666", style: Ti.UI.iPhone.TableViewStyle.GROUPED, data: [s0,s01,s1,s2] }); w.add(tableView); w.open(); {noformat} Thanks in advance! / Daniel
  12. Carter Lathrop 2013-04-01

    @Damien, thank you again for your patience in helping to create a thorough bug report. I have moved this bug to engineering who will take further action. Please be sure to keep a watch on this ticket for updates and final resolution. Regards, Carter
  13. Daniel Hansson 2013-04-01

    @Carter, thanks very much for your help.
  14. Daniel Hansson 2013-04-29

    Any news on this one? We updated to Ti SDK 3.1.0GA but still have the same problem. Really need a solution for this. Thanks Daniel
  15. Daniel Hansson 2013-05-02

    @Carter Please send me news on this one! Really important for us to go further with the improvment of our app.
  16. Carter Lathrop 2013-05-02

    Daniel, I just sent a note to the head of engineering about this ticket. I will also raise the ticket priority and reassign the ticket accordingly. Sorry for the wait, there should be a response soon. Carter
  17. Daniel Hansson 2013-05-02

    Carter, thanks for the answer. / Daniel
  18. Neeraj Gupta 2013-05-02

    Ingo - Please schedule as per your schedule.
  19. Olga Romero 2013-10-29

    It is really hard to reproduce, but I did :( with: Mac osx 10.9 Mavericks Titanium Studio, build:3.2.0.201310240435 CLI 3.2.0(72f7426b4ee6c2d2883c666d5b7e03906a16012f) Xcode5.0.1 Titanium SDK, build 3.1.3.GA iOS Simulator 6.1 Had to scroll down and up way more than 4 times. Once again, it is really hard to reproduce. Taking off qe-investigate label.
  20. Ingo Muschenetz 2014-04-21

    We need a better test case to reproduce this. Any luck?
  21. Ritu Agrawal 2014-04-23

    TIMOB-16873 is similar with a better test case but that is on the List View.
  22. Pedro Enrique 2014-04-23

    [~ragrawal] that ticket is something different.
  23. Pedro Enrique 2014-04-23

    There has been a lot of improvements, in general, with TableView since this ticket was opened and we have not been able to reproduce this locally. If issue persists, please reopen.
  24. Neeraj Gupta 2014-04-23

    [~oromero] Please try reproducing this issue with 3.2.3 release and reopen the ticket if you can reproduce it.
  25. Olga Romero 2014-04-24

  26. Lee Morris 2017-03-07

    Unable to reproduce using the following environment; iPhone 7 and Simulator (10.2) MacOS 10.11.6 (15G31) Studio 4.8.1.201612050850 Ti SDK 6.0.2 GA Appc NPM 4.2.8 Appc CLI 6.1.0 Ti CLI 5.0.11 Alloy 1.9.5 Arrow 1.10.1 Xcode 8.2 (8C38) Node v4.6.0 Java 1.7.0_80

JSON Source