[TIMOB-26021] iOS: Search results table-view background color change

GitHub Issue	n/a
Type	Improvement
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2018-05-17T07:34:44.000+0000
Affected Version/s	n/a
Fix Version/s	Release 7.3.0
Components	iOS
Labels	backgroundColor, ios, searchbar, tableView
Reporter	Hans Knöchel
Assignee	Vijay Singh
Created	2018-05-09T10:33:34.000+0000
Updated	2018-06-12T19:43:03.000+0000

Description

I have a window with backgroundImage and a tableView with backgroundColor transparent and labels of all item white. When I click on searchBar and start typing the backgroundColor of tableView became white and the results are unreadable because item's labels have the same color of background. Android work fine with the same component Ti.UI.createSearchBar

Comments

Hans Knöchel 2018-05-09

PR - https://github.com/appcelerator/titanium_mobile/pull/10033 Test-Case:

   var win = Ti.UI.createWindow({
     backgroundColor: 'blue'
   });
    
   // TableView
   var searchTable = Titanium.UI.createSearchBar({
     barColor: '#000',
     showCancel: true,
     height: 43,
     top: 0,
   });
    
   searchTable.addEventListener('cancel', function() {
       searchTable.blur();
   });
    
   var table = Ti.UI.createTableView({
     top: 20,
     height: 300,
     backgroundColor: 'transparent',
     resultsBackgroundColor: 'red',
     resultsSeparatorColor: 'green',
      resultsSeparatorInsets: {
           left: 0
       },
     data: [
       {title: 'Apples', backgroundColor: 'transparent', color: 'white'},
       {title: 'Bananas', backgroundColor: 'transparent', color: 'white'},
       {title: 'Carrots', backgroundColor: 'transparent', color: 'white'},
       {title: 'Potatoes', backgroundColor: 'transparent', color: 'white'}
     ],
     search: searchTable
   });
    
   //ListView
   var searchList = Titanium.UI.createSearchBar({
     barColor: '#000',
     showCancel: true,
     height: 43,
     top: 0,
   });
    
   searchList.addEventListener('cancel', function() {
       searchList.blur();
   });
    
   var list = Ti.UI.createListView({
     backgroundColor: 'transparent',
     top: 350,
     height: 300,
     searchView: searchList,
    
     resultsBackgroundColor: 'red',
     resultsSeparatorColor: 'green',
     resultsSeparatorInsets: {
           left: 0
       },
    
       templates: {
           'a': {
               properties: {
                   backgroundColor: 'transparent'
               },
               childTemplates: [{
                   type: 'Ti.UI.Label',
                   bindId: 'bindLabel',
                   properties: {
                       color: '#fff'
                   }
    
               }]
           }
       }
   });
    
   var section = Ti.UI.createListSection();
   var data = ['Apple', 'Banana', 'Carrots', 'Potatoes'];
   var items = [];
   for (var i = 0; i < data.length; i++) {
     items.push({
         template: 'a',
         properties: {
             searchableText: data[i]
         },
         bindLabel: {
             text: data[i]
         }
     });
   }
   section.setItems(items);
   list.sections = [section];
    
   win.add(table);
   win.add(list);
   win.open();

Samir Mohammed 2018-06-12

Closing ticket. Fix can be seen in SDK Version: 7.3.0.v20180607210411 Other information can be found at: https://github.com/appcelerator/titanium_mobile/pull/10033 Able to see search result items and background colour no longer remains white when searching for an item *Test Environment* APPC Studio: 5.0.0.201712081732 APPC CLI: 7.0.4-5 iphone 6 plus (10.2) Operating System Name: Mac OS High Sierra Operating System Version: 10.13 Node.js Version: 8.9.1 Xcode 9.2

JSON Source