[TIMOB-25287] iPhone X: Ti.UI.SearchBar in list-view get wrongly positioned

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2017-10-11T21:23:54.000+0000
Affected Version/s	Release 6.2.0
Fix Version/s	Release 6.3.0
Components	iOS
Labels	iphonex
Reporter	Vijay Singh
Assignee	Vijay Singh
Created	2017-09-15T09:45:35.000+0000
Updated	2018-11-01T10:28:27.000+0000

Description

While looking in TIMOB-25271, I found that when search started in list view in iPhone X, search bar get placed at wrong position. Test Case-

var rows = [];
for (var i = 0; i < 20; i++) {
    rows.push({ properties: { title: 'Row '+ i , backgroundColor: 'red', searchableText:'Row '+i}});
}
var win = Ti.UI.createWindow({
  title: 'TEST',
  backgroundColor: '#ffffff',
}); 
var sb = Ti.UI.createSearchBar();
 
var ls = Ti.UI.createListSection({
  items: rows
});
 
 var lv = Ti.UI.createListView({
    top : 0,
    sections: [ls],
    searchView: sb,
    resultsBackgroundColor: 'green',
    resultsSeparatorColor: 'blue'
});
 
sb.setHintText("test");
 sb.addEventListener('change', function(e){
  Ti.API.info(e.value);
});
 
 //when the return key is hit, remove focus from our searchBar
sb.addEventListener('return', function(e){
  sb.blur();
});
lv.addEventListener('itemclick', function(e) {
    Ti.API.info('click at index: ' + e.itemIndex);
});
 
win.add(lv);
win.open();

Attachments

File	Date	Size
screenshot_iphoneX.png	2017-09-16T08:13:43.000+0000	78856

Comments

Hans Knöchel 2017-09-15

Can you attach a screenshot? *EDIT*: Thanks! Also see [this post](https://www.bignerdranch.com/blog/get-your-apps-ready-for-iphone-x/) that talks about the search-bar as well. The fix would basically be: if ([TiUtils isiOS11OrLater]) { self.navigationItem.searchController = searchController; searchController.isActive = YES; } else { // Old behavior }
Matthew Delmarter 2017-09-16

A couple of other interesting links in relation to issues with the searchBar in iOS 11. The actual size of the searchBar has changed. It seems you might be able to control it: https://stackoverflow.com/questions/46037928/ios-11-uisearchbar-in-navigation-bar And then when the searchBar is needed in the navigationBar then as Hans mentioned in the previous comment, you need to use the new searchController option. This link has a nice screenshot of the problem etc: https://stackoverflow.com/questions/45350035/ios-11-searchbar-in-navigationbar
Matthew Delmarter 2017-09-16

Vijay Singh 2017-09-27

PR (master): https://github.com/appcelerator/titanium_mobile/pull/9483 PR (6_3_X): https://github.com/appcelerator/titanium_mobile/pull/9482 Test Case - 1 .

   var rows = [];
   for (var i = 0; i < 20; i++) {
       rows.push({ properties: { title: 'Row '+ i , backgroundColor: 'red', searchableText:'Row '+i}});
   }
   var win = Ti.UI.createWindow({
     title: 'TEST',
     backgroundColor: '#ffffff',
   }); 
   var sb = Ti.UI.createSearchBar();
    
   var ls = Ti.UI.createListSection({
     items: rows
   });
    var lv = Ti.UI.createListView({
       sections: [ls],
       searchView: sb,
   });
    
   sb.setHintText("test");
    sb.addEventListener('change', function(e){
     Ti.API.info(e.value);
   });
    //when the return key is hit, remove focus from our searchBar
   sb.addEventListener('return', function(e){
     sb.blur();
   });
   lv.addEventListener('itemclick', function(e) {
       Ti.API.info('click at index: ' + e.itemIndex);
   });
   win.add(lv);
   var navWin = Ti.UI.iOS.createNavigationWindow({window: win});
   navWin.open();

   var rows = [];
   for (var i = 0; i < 20; i++) {
       rows.push({ properties: { title: 'Row '+ i , backgroundColor: 'red', searchableText:'Row '+i}});
   }
   var win = Ti.UI.createWindow({
     title: 'TEST',
     backgroundColor: '#ffffff',
   }); 
   var sb = Ti.UI.createSearchBar();
    
   var ls = Ti.UI.createListSection({
     items: rows
   });
    
    var lv = Ti.UI.createListView({
       sections: [ls],
       searchView: sb,
       top:100
   });
   sb.setHintText("test");
    sb.addEventListener('change', function(e){
     Ti.API.info(e.value);
   });
    //when the return key is hit, remove focus from our searchBar
   sb.addEventListener('return', function(e){
     sb.blur();
   });
   lv.addEventListener('itemclick', function(e) {
       Ti.API.info('click at index: ' + e.itemIndex);
   });
    
   win.add(lv);
   win.open();

3. TiUITableView

   var rows = [];
   for (var i = 0; i < 20; i++) {
       rows.push({ title: 'Row '+ i});
   }
    
    
   var win = Ti.UI.createWindow({
     title: 'TEST',
     backgroundColor: '#ffffff',
   });
     
   var sb = Ti.UI.createSearchBar();
    
   var lv = Ti.UI.createTableView({
       hideSearchOnSelection: false,
       data: rows,
       search: sb,
       top:50
   });
    
    sb.setHintText("test");
    sb.addEventListener('change', function(e){
     Ti.API.info(e.value);
   });
    
    //when the return key is hit, remove focus from our searchBar
   sb.addEventListener('return', function(e){
   sb.blur();
   });
    
   //when the cancel button is tapped, remove focus from our searchBar
   sb.addEventListener('cancel', function(e){
   //sb.blur();
   });
   lv.addEventListener('click', function(e) {
       Ti.API.info('click at index: ' + e.index);
       Ti.API.info('clicked row data: ' + e.rowData.title);
    
   })
    
   win.add(lv);
   win.open();

Eric Wieber 2017-10-11

FR Passed. Searchbar displays in the correct position on iPhone X. Tested using the provided cases in this and the related ticket that the PR is for as well as the searchbar suite
Eric Wieber 2017-10-11

Verified in SDK builds 6.3.0.v20171011142527 & 7.0.0.v20171009065347

Matthew Delmarter 2018-11-01

Did the new searchController referred to by @Hans ever get implemented? He talked about...

   if ([TiUtils isiOS11OrLater]) {
       self.navigationItem.searchController = searchController;
       searchController.isActive = YES;
   } else {
       // Old behavior
   }

Hans Knöchel 2018-11-01

I don't think so far! I just created a new ticket (TIMOB-26509) to track this. We need this as well, thanks for the hint!

JSON Source