Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25952] iOS: Listview setHeaderView with search is not working

GitHub Issuen/a
TypeBug
PriorityNone
StatusClosed
ResolutionDone
Resolution Date2018-04-16T09:18:54.000+0000
Affected Version/sRelease 7.1.0
Fix Version/sn/a
ComponentsiOS
Labelsn/a
ReporterAminul Islam
AssigneeVijay Singh
Created2018-04-10T14:00:34.000+0000
Updated2018-08-06T17:34:50.000+0000

Description

Hello ! We have an issue with Listview setHeaderView with search. HeaderView is not displayed on iOS with search bar but its working on android. Test code:
var popularSearchList = [],
    searchList = [],
    popularSearchListData = [],
    searchListData = [];
for (var i = 0; i < 5; i++) {
	popularSearchList.push({
		id : i,
		name : "Bhuvan " + i
	});
}
searchList.push({
	id : 0,
	name : "ListView"
}, {
	id : 1,
	name : "TextField"
}, {
	id : 2,
	name : "EditText"
}, {
	id : 3,
	name : "Spinner"
}, {
	id : 4,
	name : "Button"
}, {
	id : 5,
	name : "ImageView"
}, {
	id : 6,
	name : "ImageButton"
}, {
	id : 7,
	name : "RecyclerView"
}, {
	id : 8,
	name : "CardView"
});

showRecentSearchList(popularSearchList);
showSearchList(searchList);

function showRecentSearchList(popularSearchList) {
	_.each(popularSearchList, function(popularSearchDataObj) {
		var listRowObj = {
			lblRecentSearchItem : {
				text : popularSearchDataObj.name
			},
			rowName : popularSearchDataObj.name,
			template : "recentSearchListTemplate",
		};
		popularSearchListData.push(listRowObj);
	});
	$.lvSearchList.sections[0].setHeaderView(addRecentSectionHeader());
	$.lvSearchList.sections[0].setItems(popularSearchListData);
}

function showSearchList(searchList) {
	_.each(searchList, function(searchListObj) {
		var listRowObj = {
			lblSearchItem : {
				text : searchListObj.name
			},
			rowName : searchListObj.name,
			properties : {
				searchableText : searchListObj.name,
			},
			template : "searchListTemplate"
		};
		searchListData.push(listRowObj);
	});
	//$.lvSearchList.sections[0].setHeaderView(addSearchSectionHeader());
	//$.lvSearchList.sections[0].setItems(searchListData);
}

function searchAction(e) {
	$.lvSearchList.searchText = e.value;
	if (e.value.length > 0) {
		showListView(true);
	} else {
		showListView(false);
	}
}

function showListView(isSearchData) {
	//$.lvSearchList.sections[0].setHeaderView(addSearchSectionHeader());
	if (isSearchData) {
		$.lvSearchList.sections[0].setHeaderView(addSearchSectionHeader());
		$.lvSearchList.sections[0].setItems(searchListData);
	} else {
		$.lvSearchList.sections[0].setHeaderView(addRecentSectionHeader());
		$.lvSearchList.sections[0].setItems(popularSearchListData);
	}
}

function addRecentSectionHeader() {
	var headerView = Ti.UI.createView({
		width : Titanium.UI.FILL,
		height : 40,
		backgroundColor : 'white',
		layout : 'horizontal'
	});
	var leftImage = Ti.UI.createImageView({
		width : Titanium.UI.SIZE,
		height : Titanium.UI.SIZE,
		image : '/images/customer.png',
		left : 20,
	});
	headerView.add(leftImage);
	var title = "RECENT";
	var lblTitle = Titanium.UI.createLabel({
		width : Titanium.UI.FILL,
		text : title,
		height : Titanium.UI.FILL,
		color : 'red',
		left : 20,
		font : {
			fontSize : 16,
			fontWeight : 'bold'
		}
	});
	headerView.add(lblTitle);
	return headerView;
}

function addSearchSectionHeader() {
	var headerView = Ti.UI.createView({
		width : Titanium.UI.FILL,
		height : 40,
		backgroundColor : 'white',
		layout : 'horizontal'
	});
	var leftImage = Ti.UI.createImageView({
		width : Titanium.UI.SIZE,
		height : Titanium.UI.SIZE,
		image : '/images/chassis.png',
		left : 20,
	});
	headerView.add(leftImage);
	var title = "RESULTS";
	var lblTitle = Titanium.UI.createLabel({
		width : Titanium.UI.FILL,
		text : title,
		height : Titanium.UI.FILL,
		color : 'red',
		left : 20,
		font : {
			fontSize : 16,
			fontWeight : 'bold'
		}
	});
	headerView.add(lblTitle);
	return headerView;
}

function cancelSearchAction(e) {

}

$.index.open();

<Alloy>
	<Window class="container">
		<View width="Titanium.UI.FILL" height="Titanium.UI.FILL" layout="vertical" top="25">
			<View width="Titanium.UI.FILL" height="40" borderColor="green" borderWidth="2" left="10" right="10">
				<SearchBar id="tfSearchField" onChange="searchAction" onCancel="cancelSearchAction" />
				<!--<TextField id="tfSearchField" platform="ios" onChange="searchAction" onCancel="cancelSearchAction" />-->
			</View>
			<ListView id="lvSearchList" defaultItemTemplate="searchListItem">
				<Templates>
					<ItemTemplate id="recentSearchListTemplate" name="recentSearchListTemplate">
						<View id="viewRecentSearchList">
							<Label id="lblRecentSearchItem" bindId="lblRecentSearchItem"/>
							<ImageView id="imgRightArrow"/>
						</View>
					</ItemTemplate>
					<ItemTemplate id="searchListTemplate" name="searchListTemplate">
						<View id="viewSearchList">
							<Label id="lblSearchItem" bindId="lblSearchItem"/>
							<ImageView id="imgRightArrow"/>
						</View>
					</ItemTemplate>
				</Templates>
				<ListSection/>
			</ListView>
		</View>
	</Window>
</Alloy>
Full project ListviewSearch.zip Please take a look on attached screenshot for android and iOS. Teste Environment :
Operating System
  Name                        = Mac OS X
  Version                     = 10.13
  Architecture                = 64bit
  # CPUs                      = 4
  Memory                      = 8589934592
Node.js
  Node.js Version             = 8.9.1
  npm Version                 = 5.5.1
Titanium CLI
  CLI Version                 = 5.0.14
Titanium SDK
  SDK Version                 = 7.1.0.GA
Thanks

Attachments

FileDateSize
ListviewSearch.zip2018-04-10T13:54:43.000+00007903781
Screenshot_20180410-194749.png2018-04-10T13:55:56.000+000084575
Screen Shot 2018-04-10 at 7.44.30 PM.png2018-04-10T13:58:18.000+000050912

Comments

  1. Hans Knöchel 2018-04-10

    The test case contains many unrelated API's (like multiple item templates). Can you please strip it down to the minimum environment that reproduces this issue? It will speed up further analysis and a possible patch release. One thing I noticed is that the SearchBar is not linked to the ListView, resulting in a non-native behavior. Once linked to the ListView, it is able to adapt to changes of the ListView automatically. See an example (including Alloy) [here](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ListView-property-searchView).
  2. Hans Knöchel 2018-04-11

    The issue looks valid then, thanks [~jnaher]. While we work on a fix, I can think of a quite easy workaround:

    Create a new item template for the header, make it non-clickable and inside an own section for consistency

    Instead of setting the headerview, append or remove the first section

    This could also enable the possibility of "fading in" the header, since you can use animation options when inserting / removing sections, e.g. sliding it down or just without an animation. We can still fix the issue, but this just as a tip how I would implement it.
  3. Vijay Singh 2018-04-16

    Simple Test Case -
         var win = Ti.UI.createWindow({
             backgroundColor: '#fff'
         });
          
         var list = Ti.UI.createListView({
             top: 50,
             sections: [Ti.UI.createListSection({
                         headerTitle:"Line1",
                 items: [{
                     properties: {
                         title: "I",
                         searchableText: "I",
                     }
                 },{
                     properties: {
                         title: "Item 2",
                         searchableText: "Item 2",
                     }
                 },{
                     properties: {
                         title: "Item 3",
                         searchableText: "Item 3",
                     }
                 }
                 ]
             }),
             Ti.UI.createListSection({
                          headerTitle:"Line2",
          
                 items: [{
                     properties: {
                         title: "I4",
                         searchableText: "I4",
                     }
                 },{
                     properties: {
                         title: "Item 5",
                         searchableText: "Item 5",
                     }
                 },{
                     properties: {
                         title: "Item 6",
                         searchableText: "Item 6",
                     }
                 }
                 ]
             })]
         })
       
         var searchBar = Ti.UI.createSearchBar({
             top:0,
             height:44,
             barColor:'#000',
             showCancel:true,
         });
         searchBar.addEventListener('change', function(e){
         list.searchText = e.value;
         });  
         searchBar.addEventListener('return', function(e){
           searchBar.blur();
         }); 
         searchBar.addEventListener('cancel', function(e){
           searchBar.blur();
         });
       
         win.add(searchBar);
         win.add(list);
         win.open();
       
  4. Vijay Singh 2018-04-16

    In iOS for section header to be visible in search result, there is a property [keepSectionsInSearch](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ListView-property-keepSectionsInSearch). If we set this property true, section header will be visible in search result. Default value of this property is false. Please check with customer, if setting this property "true" resolves the issue. Thanks!
  5. Hans Knöchel 2018-04-16

    Thanks [~vijaysingh] for your help!
  6. Eric Merriman 2018-08-06

    Closed as completed. If this is in error, please reopen.

JSON Source