[TIMOB-16642] iOS: separatorInsets are ignored when using TableView SearchBar

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Won't Fix
Resolution Date	2014-06-13T20:27:02.000+0000
Affected Version/s	Release 3.2.2
Fix Version/s	n/a
Components	iOS
Labels	listview, separatorinsets, tableview
Reporter	Shannon Hicks
Assignee	Ingo Muschenetz
Created	2014-03-18T00:38:24.000+0000
Updated	2017-03-22T22:58:36.000+0000

Description

I have a TableView that I want the separator line to go all the way across. I set the separatorInsets property to {left:0,right:0}. I then added a SearchBar to the table. When running the app, when I search, the matching tableviewrows display with the separator inset back to the default (it doesn't go all the way left). Sample Code:

<Alloy>
	<Window id="win" top="20" class="container">
		<TableView id="mainTable">
			<SearchBar hintText="Search Title" />
			<TableViewRow title="Apple"></TableViewRow>
			<TableViewRow title="Bears"></TableViewRow>
			<TableViewRow title="Car"></TableViewRow>
			<TableViewRow title="Da Bears"></TableViewRow>
		</TableView>
	</Window>
</Alloy>

"#mainTable": {
	separatorInsets:{left:0,right:0},
	filterAttribute:"title",
}

$.win.open();

Attachments

File	Date	Size
before.png	2014-03-18T00:38:49.000+0000	24536
searching.png	2014-03-18T00:38:49.000+0000	71568

Comments

Ritu Agrawal 2014-03-19

Moving this ticket to engineering as I can reproduce this issue with the provided test case.
Radamantis Torres-Lechuga 2014-03-20

Also reproducible with 3.2.2.GA

Sabil Rahim 2014-04-24

This is essentially due to the fact that the searchView table and normal table are not the same. This could be achieved by using the searchText API on LIstView.

   function isValidVar(check){
       if (check !== undefined && check !== null){
           return true;
       }
       return false;
   }
   
   function clickHandler(e){
       var message = 'Type:'+e.type+'\nSection title:'+e.section.headerTitle+'\nsectionIndex:'+e.sectionIndex+'\nitemIndex:'+e.itemIndex;
       if(isValidVar(e.bindId)){
           message += '\nbindId:'+e.bindId;
       }
       if(isValidVar(e.itemId)){
           message += '\nitemId:'+e.itemId;
       }
       alert(message);
   }
   
   function genTest(win) {
   	var sections = [];
   
   	var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
   	var fruitDataSet = [
   	    {properties: { title: 'Apple', searchableText:' Fruits Apple', itemId:'0 0'}},
   	    {properties: { title: 'Banana', searchableText:'Fruits Banana', itemId:'0 1'}},
   	    {properties: { title: 'Cantaloupe', searchableText:'Fruits Cantaloupe', itemId:'0 2'}},
   	    {properties: { title: 'Fig', searchableText:'Fruits Fig', itemId:'0 3'}},
   	    {properties: { title: 'Guava', searchableText:'Fruits Guava', itemId:'0 4'}},
   	    {properties: { title: 'Kiwi', searchableText:'Fruits Kiwi', itemId:'0 5'}},
   	];
   	fruitSection.setItems(fruitDataSet);
   	sections.push(fruitSection);
   	 
   	var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
   	var vegDataSet = [
   	    {properties: { title: 'Carrots', searchableText:'Vegetables Carrots', itemId:'1 0'}},
   	    {properties: { title: 'Potatoes', searchableText:'Vegetables Potatoes', itemId:'1 1'}},
   	    {properties: { title: 'Corn', searchableText:'Vegetables Corn', itemId:'1 2'}},
   	    {properties: { title: 'Beans', searchableText:'Vegetables Beans', itemId:'1 3'}},
   	    {properties: { title: 'Tomato', searchableText:'Vegetables Tomato', itemId:'1 4'}},
   	];
   	vegSection.setItems(vegDataSet);
   	sections.push(vegSection);
   	 
   	 
   	var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'});
   	var fishDataSet = [
   	    {properties: { title: 'Cod', searchableText:'Fish Cod', itemId:'2 0'}},
   	    {properties: { title: 'Haddock', searchableText:'Fish Haddock', itemId:'2 1'}},
   	    {properties: { title: 'Salmon', searchableText:'Fish Salmon', itemId:'2 2'}},
   	    {properties: { title: 'Tuna', searchableText:'Fish Tuna', itemId:'2 3'}},
   	];
   	fishSection.setItems(fishDataSet);
   	sections.push(fishSection);
   	
   	var animalsSection = Ti.UI.createListSection({ headerTitle: 'Animals'});
   	var animalsDataSet = [
   	    {properties: { title: 'Deer', searchableText:'Animals Deer', itemId:'3 0'}},
   	    {properties: { title: 'Dog', searchableText:'Animals Dog', itemId:'3 1'}},
   	    {properties: { title: 'Cat', searchableText:'Animals Cat', itemId:'3 2'}},
   	    {properties: { title: 'Elephant', searchableText:'Animals Elephant', itemId:'3 3'}},
   	];
   	animalsSection.setItems(animalsDataSet);
   	sections.push(animalsSection);
   	var listView = Ti.UI.createListView({top: '50dp',separatorInsets:{left:100}});
   	listView.style=Ti.UI.iPhone.ListViewStyle.PLAIN;
   	
   	listView.sections = sections;
   	listView.keepSectionsInSearch = true;
   	
   	var tf = Ti.UI.createTextField({
   	    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
   	    color: '#336699',
   	    height: '40dp',
   	    width:Ti.UI.FILL,
   	    left:5,
   	    top: 5,
   	    font:{fontSize:20,fontWeight:'bold'},
   	    hintText: 'Search'
   	});
   	
   	tf.addEventListener('change',function(e){
   	    listView.searchText = e.value;
   	});
   	
   	win.add(tf);
   	
   	
   	var indices = [
   	{index:0,title:'Fru'},
   	{index:1,title:'Veg'},
   	{index:2,title:'Fis'},
   	{index:3,title:'Ani'}
   	];
   	listView.sectionIndexTitles = indices;
   	
   	
   	win.add(listView);
   	
   	listView.addEventListener('itemclick', clickHandler);
   
   }
   
   
   var win = Ti.UI.createWindow({
   	title:'Search API',
   });
   genTest(win);
   win.open();

Malcolm Hollingsworth 2014-05-21

Any idea when this will be resolved? Given the previous separator line issue was resolved - surely this one would be a small tweak on from that? This is the sort of issue that makes people think that Titanium apps are not quite proper apps. It falls into the category of the old label problem on a tableViewRow when it was selected a Titanium app was not able change the label colour and then back again - it looked cheap and an almost app - then the property highlightedColor was added - and that tiny change meant we no longer looked an almost app.
Radamantis Torres-Lechuga 2014-06-13

Won't fix, since the way to go is using ListView as described in the comments
colons 2014-06-13

If using a ListView as a drop-in replacement for a TableView was a workable solution to all instances of this problem, there would be no reason for TableView to exist in the first place.
Ingo Muschenetz 2014-06-16

[~colons] Is there a ticket for ListView that describes why it won't work for your use case?
Lee Morris 2017-03-22

Closing ticket as "Won't Fix".

JSON Source