Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-16679] Android: Links do not work in ListView (e.g. autoLink)

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2014-05-29T22:25:31.000+0000
Affected Version/sRelease 3.2.2
Fix Version/s2014 Sprint 10, 2014 Sprint 10 SDK, Release 3.3.0
ComponentsAndroid
Labelsandroid, module_listview, qe-closed-3.3.0, qe-testadded
ReporterTan Li Hao
AssigneeHieu Pham
Created2014-03-23T12:04:55.000+0000
Updated2015-06-23T15:45:36.000+0000

Description

ListView does not display the links after scrolling out of screen. Both autoLink and html (text) does not work. Example code below. For the example, the first time the app loads google.com link is clickable, upon scrolling out of screen and scrolling back google.com becomes no longer clickable. 
var self = Ti.UI.createWindow({
    backgroundColor: 'white'
});
var myTemplate = {
    childTemplates: [                   // 
        {                            // Title 
            type: 'Ti.UI.Label',     // Use a label for the title 
            bindId: 'info',          // Maps to a custom info property of the item data
            properties: {            // Sets the label properties
                color: 'black',
                font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
                left: '60dp', top: 0,
                autoLink: Ti.UI.AUTOLINK_ALL
            }
        },
        {                            // Subtitle
            type: 'Ti.UI.Label',     // Use a label for the subtitle
            bindId: 'es_info',       // Maps to a custom es_info property of the item data
            properties: {            // Sets the label properties
                color: 'gray',
                font: { fontFamily:'Arial', fontSize: '14dp' },
                left: '60dp', top: '25dp',
                autoLink: Ti.UI.AUTOLINK_ALL
            }
        }
    ]
};
 
var listView = Ti.UI.createListView({
    // Maps myTemplate dictionary to 'template' string
    templates: { 'template': myTemplate },
    // Use 'template', that is, the myTemplate dict created earlier
    // for all items as long as the template property is not defined for an item.
    defaultItemTemplate: 'template'
});
var sections = [];
 
var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits / Frutas'});
var fruitDataSet = [
    // the text property of info maps to the text property of the title label
    // the text property of es_info maps to text property of the subtitle label
    // the image property of pic maps to the image property of the image view
    { info: {html: "<a href='http://en.wikipedia.org/wiki/Apple'>Apple</a>"}, es_info: {text: 'Manzana'}},
    { info: {html: "<a href='http://en.wikipedia.org/wiki/Banana'>Banana</a>"}, es_info: {text: 'Banana'}}
];
fruitSection.setItems(fruitDataSet);
sections.push(fruitSection);
 
var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables / Verduras'});
var vegDataSet = [
    { info: {html: 'Carrot'}, es_info: {text: 'Zanahoria'}},
    { info: {html: 'Potato'}, es_info: {text: 'Patata'}}
];
vegSection.setItems(vegDataSet);
sections.push(vegSection);
 
var grainSection = Ti.UI.createListSection({ headerTitle: 'Grains / Granos'});
var grainDataSet = [
    { info: {html: "<a href='http://en.wikipedia.org/wiki/Maiz'>Corn</a>"}, es_info: {text: 'Maiz'}},
    { info: {html: "<a href='http://en.wikipedia.org/wiki/Rice'>Rice</a>"}, es_info: {text: 'Arroz'}},
    { info: {html: "<a href='http://en.wikipedia.org/wiki/Wheat'>Wheat</a>"}, es_info: {text: 'Trigo'}},
    { info: {html: "<a href='http://en.wikipedia.org/wiki/Maiz'>Corn</a>"}, es_info: {text: 'Maiz'}},
    { info: {html: "<a href='http://en.wikipedia.org/wiki/Rice'>Rice</a>"}, es_info: {text: 'Arroz'}},
    { info: {html: "<a href='http://en.wikipedia.org/wiki/Wheat'>Wheat</a>"}, es_info: {text: 'Trigo'}},
    { info: {html: "<a href='http://en.wikipedia.org/wiki/Maiz'>Corn</a>"}, es_info: {text: 'Maiz'}},
    { info: {html: "<a href='http://en.wikipedia.org/wiki/Rice'>Rice</a>"}, es_info: {text: 'Arroz'}},
    { info: {html: "<a href='http://en.wikipedia.org/wiki/Wheat'>Wheat</a>"}, es_info: {text: 'Trigo'}},
    { info: {html: "<a href='http://en.wikipedia.org/wiki/Maiz'>Corn</a>"}, es_info: {text: 'Maiz'}},
    { info: {html: "<a href='http://en.wikipedia.org/wiki/Rice'>Rice</a>"}, es_info: {text: 'Arroz'}},
    { info: {html: "<a href='http://en.wikipedia.org/wiki/Wheat'>Wheat</a>"}, es_info: {text: 'Trigo'}},
];
grainSection.setItems(grainDataSet);
sections.push(grainSection);
 
listView.setSections(sections);
     
self.add(listView);
self.open();

Comments

  1. Ritu Agrawal 2014-03-24

    I can run your test case but I cannot test the link functionality because your test is missing the html and png files. Can you please provide the linked files so that we can reproduce the issue?
  2. Tan Li Hao 2014-03-24

    Hi the example does not require html files (they are inlined). As for png files it is also unnecessary. I edited the example to remove it
  3. Ritu Agrawal 2014-03-24

    Moving this to engineering as I can reproduce this issue on Android Galaxy Nexus device.
  4. Tan Li Hao 2014-03-29

    Is there any updates?
  5. Jeff Antram 2014-04-29

    In my app, mailto: and tel: links work, but http:// and https:// do not. EDIT - this is not the case - links of all kinds work as expected intermittently.
  6. Hieu Pham 2014-05-14

    master PR: https://github.com/appcelerator/titanium_mobile/pull/5678
  7. Vishal Duggal 2014-05-14

    Additional Test Case 
       var win = Ti.UI.createWindow({
       backgroundColor:'white',
   });
   
   var sV = Ti.UI.createScrollView({
   	layout:'vertical',
   	scrollType:'vertical'
   });
    
   var html = '<p>Conatct Info<br/><a href="mailto:test@example.com">Email Me</a><br/><a href="tel:5555555555">Call</a><br/><a href="http://appcelerator.com">webpage</a><br/></p>';
   var text = '\ntest@example.com\n(555)-555-5555\nhttp://appcelerator.com\n';
    
   var clicklistener = function(e) {
       Ti.API.info('CLICK ON LABEL '+JSON.stringify(e.source));
   };
    
   var h1 = Ti.UI.createLabel({top:10,backgroundColor:'red',width:Ti.UI.FILL,html:'<p>AUTOLINK UNDEFINED</p><br/><br/>'+html});
   var h2 = Ti.UI.createLabel({top:10,backgroundColor:'red',width:Ti.UI.FILL,html:'<p>AUTOLINK EMAIL</p><br/><br/>'+html,autoLink:Ti.UI.AUTOLINK_EMAIL_ADDRESSES});
   var h3 = Ti.UI.createLabel({top:10,backgroundColor:'red',width:Ti.UI.FILL,html:'<p>AUTOLINK PHONE</p><br/><br/>'+html,autoLink:Ti.UI.AUTOLINK_PHONE_NUMBERS});
   var h4 = Ti.UI.createLabel({top:10,backgroundColor:'red',width:Ti.UI.FILL,html:'<p>AUTOLINK URL</p><br/><br/>'+html,autoLink:Ti.UI.AUTOLINK_URLS});
   var h5 = Ti.UI.createLabel({top:10,backgroundColor:'red',width:Ti.UI.FILL,html:'<p>AUTOLINK ALL</p><br/><br/>'+html,autoLink:Ti.UI.AUTOLINK_ALL});
   var h6 = Ti.UI.createLabel({top:10,backgroundColor:'red',width:Ti.UI.FILL,html:'<p>AUTOLINK NONE</p><br/><br/>'+html,autoLink:Ti.UI.AUTOLINK_NONE});
   var t1 = Ti.UI.createLabel({top:10,backgroundColor:'red',width:Ti.UI.FILL,text:'AUTOLINK UNDEFINED\n'+text}); 
   var t2 = Ti.UI.createLabel({top:10,backgroundColor:'red',width:Ti.UI.FILL,text:'AUTOLINK EMAIL\n'+text,autoLink:Ti.UI.AUTOLINK_EMAIL_ADDRESSES}); 
   var t3 = Ti.UI.createLabel({top:10,backgroundColor:'red',width:Ti.UI.FILL,text:'AUTOLINK PHONE\n'+text,autoLink:Ti.UI.AUTOLINK_PHONE_NUMBERS}); 
   var t4 = Ti.UI.createLabel({top:10,backgroundColor:'red',width:Ti.UI.FILL,text:'AUTOLINK URL\n'+text,autoLink:Ti.UI.AUTOLINK_URLS}); 
   var t5 = Ti.UI.createLabel({top:10,backgroundColor:'red',width:Ti.UI.FILL,text:'AUTOLINK ALL\n'+text,autoLink:Ti.UI.AUTOLINK_ALL}); 
   var t6 = Ti.UI.createLabel({top:10,backgroundColor:'red',width:Ti.UI.FILL,text:'AUTOLINK NONE\n'+text,autoLink:Ti.UI.AUTOLINK_NONE}); 
    
   
    addEventListener('click',clicklistener);
    
   
    addEventListener('click',clicklistener);
    
   
    addEventListener('click',clicklistener);
    
   
    addEventListener('click',clicklistener);
    
   
    addEventListener('click',clicklistener);
    
   
    addEventListener('click',clicklistener);
    
   t1.addEventListener('click',clicklistener);
   t2.addEventListener('click',clicklistener);
   t3.addEventListener('click',clicklistener);
   t4.addEventListener('click',clicklistener);
   t5.addEventListener('click',clicklistener);
   t6.addEventListener('click',clicklistener);
    
   win.add(sV);
   
   sV.add(h1); 
   sV.add(h2); 
   sV.add(h3); 
   sV.add(h4); 
   sV.add(h5); 
   sV.add(h6);
   sV.add(t1); 
   sV.add(t2); 
   sV.add(t3); 
   sV.add(t4); 
   sV.add(t5); 
   sV.add(t6); 
   
   win.open();
  8. Vishal Duggal 2014-05-14

    Additional Test Case 
       var self = Ti.UI.createWindow({
       backgroundColor: 'white'
   });
   var myTemplate = {
       childTemplates: [                   // 
           {                            // Title 
               type: 'Ti.UI.Label',     // Use a label for the title 
               bindId: 'info',          // Maps to a custom info property of the item data
               properties: {            // Sets the label properties
                   color: 'black',
                   font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
                   left: '60dp', top: 0,
                   autoLink: Ti.UI.AUTOLINK_ALL
               }
           },
           {                            // Subtitle
               type: 'Ti.UI.Label',     // Use a label for the subtitle
               bindId: 'es_info',       // Maps to a custom es_info property of the item data
               properties: {            // Sets the label properties
                   color: 'gray',
                   font: { fontFamily:'Arial', fontSize: '14dp' },
                   left: '60dp', top: '50dp',
                   autoLink: Ti.UI.AUTOLINK_NONE
               }
           }
       ]
   };
     
   var listView = Ti.UI.createListView({
       // Maps myTemplate dictionary to 'template' string
       templates: { 'template': myTemplate },
       // Use 'template', that is, the myTemplate dict created earlier
       // for all items as long as the template property is not defined for an item.
       defaultItemTemplate: 'template'
   });
   var sections = [];
     
   var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits / Frutas'});
   var fruitDataSet = [
       { info: {text: "Apple\t http://en.wikipedia.org/wiki/Apple"}, es_info: {text: 'Manzana'}},
       { info: {text: "Banana\t http://en.wikipedia.org/wiki/Banana"}, es_info: {text: 'Banana'}},
       { info: {text: "Pineapple\t http://en.wikipedia.org/wiki/Pineapple"}, es_info: {text: 'Pina'}},
       { info: {text: "Peach \thttp://en.wikipedia.org/wiki/Peach"}, es_info: {text: 'Durazno'}},
       { info: {text: "Apple\t http://en.wikipedia.org/wiki/Apple"}, es_info: {text: 'Manzana'}},
       { info: {text: "Banana\t http://en.wikipedia.org/wiki/Banana"}, es_info: {text: 'Banana'}},
       { info: {text: "Pineapple\t http://en.wikipedia.org/wiki/Pineapple"}, es_info: {text: 'Pina'}},
       { info: {text: "Peach \thttp://en.wikipedia.org/wiki/Peach"}, es_info: {text: 'Durazno'}}
   ];
   fruitSection.setItems(fruitDataSet);
   sections.push(fruitSection);
     
   var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables / Verduras'});
   var vegDataSet = [
       { info: {text: 'Carrot\thttp://en.wikipedia.org/wiki/Carrot'}, es_info: {text: 'Zanahoria'}},
       { info: {text: 'Potato\thttp://en.wikipedia.org/wiki/Potato'}, es_info: {text: 'Patata'}},
       { info: {text: 'Carrot\thttp://en.wikipedia.org/wiki/Carrot'}, es_info: {text: 'Zanahoria'}},
       { info: {text: 'Potato\thttp://en.wikipedia.org/wiki/Potato'}, es_info: {text: 'Patata'}},
   ];
   vegSection.setItems(vegDataSet);
   sections.push(vegSection);
     
   var grainSection = Ti.UI.createListSection({ headerTitle: 'Grains / Granos'});
   var grainDataSet = [
       { info: {text: "Corn\t http://en.wikipedia.org/wiki/Maiz"}, es_info: {text: 'Maiz'}},
       { info: {text: "Rice\t http://en.wikipedia.org/wiki/Rice"}, es_info: {text: 'Arroz'}},
       { info: {text: "Wheat\t http://en.wikipedia.org/wiki/Wheat"}, es_info: {text: 'Trigo'}},
       { info: {text: "Corn\t http://en.wikipedia.org/wiki/Maiz"}, es_info: {text: 'Maiz'}},
       { info: {text: "Rice\t http://en.wikipedia.org/wiki/Rice"}, es_info: {text: 'Arroz'}},
       { info: {text: "Wheat\t http://en.wikipedia.org/wiki/Wheat"}, es_info: {text: 'Trigo'}}
   ];
   grainSection.setItems(grainDataSet);
   sections.push(grainSection);
     
   listView.setSections(sections);
         
   self.add(listView);
   self.open();
  9. Vishal Duggal 2014-05-14

    PR merged
  10. Neha Mittal 2014-05-15

    Verified fix with code provided in the comment using below environment: Appc Studio: 3.3.0.201405121247 SDK build: 3.3.0.v20140514163013 acs: 1.0.14 npm: 1.3.2 alloy: 1.4.0-alpha CLI: titanium-3.3.0-dev titanium-code-processor:1.1.1 Xcode: 5.1.1 Osx: Mavericks(10.9.2) Device: LG (4.0.4) Links do work in ListView even after scrolling. Hence closing the issue.
  11. Davide Cassenti 2014-05-28

    It looks like the issue is still there in one particular case: when one of the links is without the tag. Using the code above, just replace one of the items with: 
        { info: {html: "<a href='http://google.com'>http://google.com<;/a>"}, es_info: {text: 'Manzana'}}
    Or just: 
        { info: {html: "http://google.com"}, es_info: {text: 'Manzana'}}
    Some links disappear when scrolling or turning off the device screen.
  12. Hieu Pham 2014-05-29

  13. Lokesh Choudhary 2014-06-13

    Verified the fix. Now after scrolling out of the screen & scrolling back the links are clickable. Closing. Environment: Appc Studio : 3.3.0.201406111952 Ti SDK : 3.3.0.v20140612101712 Mac OSX : 10.8.5 Alloy : 1.4.0-rc CLI - 3.3.0-rc Code Processor: 1.1.1 Nexus 5 - android 4.4.3
  14. Praveen Kodakkad 2015-06-23

    We are getting this issue with iOS 3.5.0 SDK. Do I need to add this as a new JIRA item?
  15. Lokesh Choudhary 2015-06-23

    [~pravipravi], The latest release is 4.0.0.GA, please try with 4.0.0.GA first.

JSON Source