[TIMOB-25952] iOS: Listview setHeaderView with search is not working
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | None |
Status | Closed |
Resolution | Done |
Resolution Date | 2018-04-16T09:18:54.000+0000 |
Affected Version/s | Release 7.1.0 |
Fix Version/s | n/a |
Components | iOS |
Labels | n/a |
Reporter | Aminul Islam |
Assignee | Vijay Singh |
Created | 2018-04-10T14:00:34.000+0000 |
Updated | 2018-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
File | Date | Size |
---|---|---|
ListviewSearch.zip | 2018-04-10T13:54:43.000+0000 | 7903781 |
Screenshot_20180410-194749.png | 2018-04-10T13:55:56.000+0000 | 84575 |
Screen Shot 2018-04-10 at 7.44.30 PM.png | 2018-04-10T13:58:18.000+0000 | 50912 |
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).
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.Simple Test Case -
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!
Thanks [~vijaysingh] for your help!
Closed as completed. If this is in error, please reopen.