Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-15282] iOS7: SearchBar disappears when device rotates

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2013-09-20T21:53:34.000+0000
Affected Version/sn/a
Fix Version/s2013 Sprint 19, 2013 Sprint 19 API, Release 3.1.4, Release 3.2.0
ComponentsiOS
Labelsios7, module_searchbar, qe-testadded, triage
ReporterDavide Cassenti
AssigneeVishal Duggal
Created2013-09-19T16:10:47.000+0000
Updated2014-04-08T02:00:02.000+0000

Description

Problem description

Device rotation impacts on the visualization of the search bar. The bar disappears if there is text in it and device is rotated, or if the search button on the virtual keyboard is pressed.

Steps to reproduce

Use this code:
Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({
    title : 'Table with Search'
});
var tab1 = Titanium.UI.createTab({
    title : 'Table w/ Search',
    window : win1
});
 
var allNoteTypes = [{
    title : 'Plan 1'
}, {
    title : 'Plan 2'
}, {
    title : 'Plan 3'
}];
 
var searchBar = Ti.UI.createSearchBar({
    barColor : "#283D5A"
});
 
var table = Ti.UI.createTableView({
    top : 0,
    width : "100%",
    backgroundColor : 'transparent',
    hideSearchOnSelection : false,
    data : allNoteTypes,
    search : searchBar
});
 
win1.add(table);
 
tabGroup.addTab(tab1);
tabGroup.open();
There are two ways to replicate: 1) focus the bar, write something, then rotate the screen 2) focus the bar, write something and press return in the virtual keyboard

Note

Not sure if this can be considered related: the CANCEL button also stops working when the device is rotated. With the same code, focus the bar and rotate the screen: the CANCEL button stops working. The feature only come back when the app is restarted (e.g. rotating the device back does not help).

Comments

  1. Ingo Muschenetz 2013-09-19

    [~dcassenti] Does this relate to TIMOB-15281?
  2. Vishal Duggal 2013-09-19

    Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/4717
  3. Vishal Duggal 2013-09-19

    Test Case with ListView and TableView
       Titanium.UI.setBackgroundColor('#fff');
       var win1 = Titanium.UI.createWindow({
           title : 'Table with Search',
           //fullscreen:true
       });
       
       
       var allNoteTypes = [{
           title : 'Plan 1'
       }, {
           title : 'Plan 2'
       }, {
           title : 'Plan 3'
       }];
         
       var searchBar = Ti.UI.createSearchBar({
           barColor : "#283D5A"
       });
         
       var table = Ti.UI.createTableView({
           top : 0,
           width : "100%",
           backgroundColor : 'transparent',
           hideSearchOnSelection : false,
           data : allNoteTypes,
           search : searchBar
       });
         
       win1.add(table);
       
       var win2 = Titanium.UI.createWindow({
           title : 'List with Search',
           //fullscreen:true
       });
       
       
       var sections = [];
        
       var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
       var fruitDataSet = [
           {properties: { title: 'Apple', searchableText:' Fruits Apple', itemId:'0 0', backgroundColor:'transparent'}},
           {properties: { title: 'Banana', searchableText:'Fruits Banana', itemId:'0 1', backgroundColor:'transparent'}},
           {properties: { title: 'Cantaloupe', searchableText:'Fruits Cantaloupe', itemId:'0 2', backgroundColor:'transparent'}},
           {properties: { title: 'Fig', searchableText:'Fruits Fig', itemId:'0 3', backgroundColor:'transparent'}},
           {properties: { title: 'Guava', searchableText:'Fruits Guava', itemId:'0 4', backgroundColor:'transparent'}},
           {properties: { title: 'Kiwi', searchableText:'Fruits Kiwi', itemId:'0 5', backgroundColor:'transparent'}},
       ];
       fruitSection.setItems(fruitDataSet);
       sections.push(fruitSection);
        
       var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
       var vegDataSet = [
           {properties: { title: 'Carrots', searchableText:'Vegetables Carrots', itemId:'1 0', backgroundColor:'transparent'}},
           {properties: { title: 'Potatoes', searchableText:'Vegetables Potatoes', itemId:'1 1', backgroundColor:'transparent'}},
           {properties: { title: 'Corn', searchableText:'Vegetables Corn', itemId:'1 2', backgroundColor:'transparent'}},
           {properties: { title: 'Beans', searchableText:'Vegetables Beans', itemId:'1 3', backgroundColor:'transparent'}},
           {properties: { title: 'Tomato', searchableText:'Vegetables Tomato', itemId:'1 4', backgroundColor:'transparent'}},
       ];
       vegSection.setItems(vegDataSet);
       sections.push(vegSection);
        
        
       var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'});
       var fishDataSet = [
           {properties: { title: 'Cod', searchableText:'Fish Cod', itemId:'2 0', backgroundColor:'transparent'}},
           {properties: { title: 'Haddock', searchableText:'Fish Haddock', itemId:'2 1', backgroundColor:'transparent'}},
           {properties: { title: 'Salmon', searchableText:'Fish Salmon', itemId:'2 2', backgroundColor:'transparent'}},
           {properties: { title: 'Tuna', searchableText:'Fish Tuna', itemId:'2 3', backgroundColor:'transparent'}},
       ];
       fishSection.setItems(fishDataSet);
       sections.push(fishSection);
       
       var animalsSection = Ti.UI.createListSection({ headerTitle: 'Animals'});
       var animalsDataSet = [
           {properties: { title: 'Deer', searchableText:'Animals Deer', itemId:'3 0', backgroundColor:'transparent'}},
           {properties: { title: 'Dog', searchableText:'Animals Dog', itemId:'3 1', backgroundColor:'transparent'}},
           {properties: { title: 'Cat', searchableText:'Animals Cat', itemId:'3 2', backgroundColor:'transparent'}},
           {properties: { title: 'Elephant', searchableText:'Animals Elephant', itemId:'3 3', backgroundColor:'transparent'}},
       ];
       animalsSection.setItems(animalsDataSet);
       sections.push(animalsSection);
       
       var listView = Ti.UI.createListView();
       listView.sections = sections;
       listView.headerTitle = 'ListView on iOS can now show searchView and headerTitle (or headerView) together';
       
       var sv = Titanium.UI.createSearchBar({
               barColor:'#385292',
               showCancel:true,
               hintText:'search'
           });
       
       listView.searchView = sv;
       
       win2.add(listView);
       
       var tabGroup = Titanium.UI.createTabGroup();
       var tab1 = Titanium.UI.createTab({
           title : 'Table w/ Search',
           window : win1
       });
       
       var tab2 = Titanium.UI.createTab({
           title : 'List w/ Search',
           window : win2
       });
       
       tabGroup.addTab(tab1);
       tabGroup.addTab(tab2);
       tabGroup.open();
       
       
  4. Vishal Duggal 2013-09-20

    Backport to 3_1_X https://github.com/appcelerator/titanium_mobile/pull/4722
  5. Paras Mishra 2013-10-16

    SearchBar stays when it has text and rotated. Verified fix on: Device : iPhone 5 , iOS version : 7.0 SDK: 3.2.0.v20131013140318 CLI version : 3.2.0 OS : MAC OSX 10.8.4 Alloy : 1.2.2 Appcelerator Studio, build: 3.2.0.201310112258 XCode : 5

JSON Source