[TIMOB-13290] iOS: Ti.UI.Switch disappears when scrolling TableView
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Medium |
Status | Closed |
Resolution | Cannot Reproduce |
Resolution Date | 2014-04-23T18:14:47.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 3.4.0 |
Components | iOS |
Labels | ios, iphone |
Reporter | Carter Lathrop |
Assignee | Pedro Enrique |
Created | 2013-03-26T16:52:00.000+0000 |
Updated | 2017-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.
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.
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}
Code provided is a bit long to test with. Made my own test case which reflects the issue described:
unable to reproduce. Regards, Carter
Thanks @Carter. I will produce a more light version of the code snippet I sent above.
@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
@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}
@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
Woops, my mistake I see now that you have provided the SDK and iOS versions. Will test on them momentarily. -Carter
@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
@Carter, Ok, I will get it down under 100 lines. Sending ASAP. Thanks Daniel
@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
@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
@Carter, thanks very much for your help.
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
@Carter Please send me news on this one! Really important for us to go further with the improvment of our app.
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
Carter, thanks for the answer. / Daniel
Ingo - Please schedule as per your schedule.
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.
We need a better test case to reproduce this. Any luck?
TIMOB-16873 is similar with a better test case but that is on the List View.
[~ragrawal] that ticket is something different.
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.
[~oromero] Please try reproducing this issue with 3.2.3 release and reopen the ticket if you can reproduce it.
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