Project: titanium
Issue TIMOB-16471: iOS: Ugly / inconsistent border effects when focussing / blurring searchbar
A couple of not so clean effects when focussing and blurring a searchbar. Since I think they are all related I will only create a single issue for them. 1. When you focus a searchbar (e.g. in a listview) for the first time a thin 2-3 pixel gray bottom border appears below the search bar, followed by a bit of white and then the gray results view. (Might also be a white border over the gray results view?) 2. When you blur a search bar and focus it again a full black border appears above the search bar. Now the gray border mentioned in point 1 touches the results view so the white bar is no longer visible. 3. Because of these borders it looks like the searchbar is sort of dropped down a bit when blurring. Hard to explain, watch the 15s video... I have attached a video showing the behaviour. The code is just a plain listview with a searchbar. I have lowered the listview a bit so you can see the top border issue better. {code} // this sets the background color of the master UIView (when there are no windows/tab groups on it) Titanium.UI.setBackgroundColor('#000'); // create tab group var tabGroup = Titanium.UI.createTabGroup(); // // create base UI tab and root window // var win1 = Titanium.UI.createWindow({ title:'Tab 1', backgroundColor:'#fff' }); var tab1 = Titanium.UI.createTab({ icon:'KS_nav_views.png', title:'Tab 1', window:win1 });	var search = Ti.UI.createSearchBar({	barColor: '#FFFFFF',	borderColor: 'white'	});	search.addEventListener('cancel', function() {	search.blur();	});	var listView = Ti.UI.createListView({	searchView: search,	top: 10	});	var sections = [];	var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});	var fruitDataSet = [	{properties: { title: 'Apple'}},	{properties: { title: 'Banana'}},	];	fruitSection.setItems(fruitDataSet);	sections.push(fruitSection);	var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});	var vegDataSet = [	{properties: { title: 'Carrots'}},	{properties: { title: 'Potatoes'}},	];	vegSection.setItems(vegDataSet);	sections.push(vegSection);	listView.sections = sections;	win1.add(listView); // // create controls tab and root window // var win2 = Titanium.UI.createWindow({ title:'Tab 2', backgroundColor:'#fff' }); var tab2 = Titanium.UI.createTab({ icon:'KS_nav_ui.png', title:'Tab 2', window:win2 }); var label2 = Titanium.UI.createLabel({	color:'#999',	text:'I am Window 2',	font:{fontSize:20,fontFamily:'Helvetica Neue'},	textAlign:'center',	width:'auto' }); win2.add(label2); // // add tabs // tabGroup.addTab(tab1); tabGroup.addTab(tab2); // open tab group tabGroup.open(); {code}
Story points: 1