[TIMOB-25358] iOS: Problem with Ti.UI.SearchBar in SDK 6.2.0+ when not filling the screen

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2017-10-10T21:12:42.000+0000
Affected Version/s	Release 6.2.2, Release 6.2.0, Release 6.2.1
Fix Version/s	Release 6.3.0
Components	iOS
Labels	consider-6.2.3, ios, regression, searchBar
Reporter	Michael Landeck
Assignee	Vijay Singh
Created	2017-09-28T14:19:46.000+0000
Updated	2017-12-04T09:20:03.000+0000

Description

Hi, i place a tableview into a view component and attach a searchbar. By typing into the searchbar, the filter-result appears always on the very left side of the window. Happens not with SDK 6.1.2 and earlier. Short Example Code:

Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow();
var view = Titanium.UI.createView({
  top: 30,
  width: 400,
  left: 150,
});
var tableData = [{
    title: 'Apples'
  },
  {
    title: 'Bananas'
  },
  {
    title: 'Carrots'
  },
  {
    title: 'Potatoes'
  }
];
var searchBar = Titanium.UI.createSearchBar({
  showCancel: true,
});
var table = Ti.UI.createTableView({
  data: tableData,
  search: searchBar,
  width: 300
});
view.add(table);
win.add(view);
win.open();

Attachments

File	Date	Size
6.1.2.png	2017-09-28T18:37:49.000+0000	32020
6.2.2.png	2017-09-28T18:37:49.000+0000	33990
app.js	2017-09-28T14:15:53.000+0000	447

Comments

Aminul Islam 2017-09-28

Hi, We have tested this issue with 6.2.2.GA and 6.1.2.GA. And able to reproduce this issue, By typing into the search bar, the filter-result appears always on the very left side with 6.2.2.GA of the window !6.1.2.png|thumbnail! !6.2.2.png|thumbnail! Test Code

   Ti.UI.backgroundColor = 'white';
   var win = Ti.UI.createWindow();
   var view = Titanium.UI.createView({
   		top:30,
   		width:400,
   		left:150,
   });
   var tableData = [ {title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'} ];
   var searchBar = Titanium.UI.createSearchBar({
   			showCancel:true,
   		
   });
   var table = Ti.UI.createTableView({
     data: tableData,
     search:searchBar,
     width:300
   });
   view.add(table);
   win.add(view);
   win.open();

Test Environment

   Operating System
     Name                        = Mac OS X
     Version                     = 10.11.6
     Architecture                = 64bit
     # CPUs                      = 4
     Memory                      = 8589934592
   Node.js
     Node.js Version             = 4.4.4
     npm Version                 = 2.15.1
   Titanium CLI
     CLI Version                 = 5.0.14
   Titanium SDK
     SDK Version                 = 6.2.2.GA
     SDK Path                    = /Users/Raju/Library/Application Support/Titanium/mobilesdk/osx/6.2.2.GA
     Target Platform             = iphone

Thanks

Vijay Singh 2017-10-02

PR (master) : https://github.com/appcelerator/titanium_mobile/pull/9495 PR (6_3_X) : https://github.com/appcelerator/titanium_mobile/pull/9496 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 view = Titanium.UI.createView({
           top:50,
           width:400,
           left:150,
   });
   
   var sb = Ti.UI.createSearchBar({
                   showCancel:true,
   });
    
   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);
   });
   
   view.add(lv);
   win.add(view);
   win.open();

Test Case 2 -

   Ti.UI.backgroundColor = 'white';
   var win = Ti.UI.createWindow();
   var view = Titanium.UI.createView({
           top:50,
           width:400,
           left:150,
   });
   var tableData = [ {title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'} ];
   var searchBar = Titanium.UI.createSearchBar({
               showCancel:true,
           
   });
   var table = Ti.UI.createTableView({
     data: tableData,
     search:searchBar,
     width:300
   });
   view.add(table);
   win.add(view);
   win.open();

Note - This fix has base of TIMOB-25287. First merge TIMOB-25287's PRs then verify these PRs.

Eric Wieber 2017-10-10

FR Passed. Searchbar search results correctly appear on top of the view and not shifted to the side. Tested using the test cases and the searchbar suite.
Eric Wieber 2017-10-11

Verified in SDK builds 6.3.0.v20171011075314 & 7.0.0.v20171009065347.
Michael Landeck 2017-12-04

With iOS SDk 11.1 this Problem appears again in a similar way. The searchbar changes its width, the hint text does not appear. With 10.3.1 this doesn't happen. Same example code Operating System Name = Mac OS X Version = 10.13.1 Architecture = 64bit # CPUs = 4 Memory = 17179869184 Node.js Node.js Version = 6.10.0 npm Version = 3.10.10 Titanium CLI CLI Version = 5.0.14 Titanium SDK SDK Version = 6.3.0.GA SDK Path = /Users/ml/Library/Application Support/Titanium/mobilesdk/osx/6.3.0.GA Target Platform = iphone
Vijay Singh 2017-12-04

[~mlandeck] I think the problem, which you are talking now, is same as mentioned in TIMOB-25414. Can you please check the ticket and let me know, if that is the problem you are facing. Thanks!
Michael Landeck 2017-12-04

Vijay, yes thats it. Thanks

JSON Source