Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-16471] iOS: Ugly / inconsistent border effects when focussing / blurring searchbar

GitHub Issuen/a
TypeBug
PriorityLow
StatusClosed
ResolutionFixed
Resolution Date2016-04-27T17:06:53.000+0000
Affected Version/sRelease 3.2.1
Fix Version/sRelease 5.4.0
ComponentsiOS
Labelsanimation, border, qe-5.4.0, searchbar
ReporterMartijn Kooij
AssigneeHans Knöchel
Created2014-02-13T20:07:09.000+0000
Updated2016-07-06T17:58:24.000+0000

Description

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.
// 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();

Attachments

FileDateSize
search_focus_blur_border.mov2014-02-13T20:07:09.000+00004120303

Comments

  1. Ritu Agrawal 2014-02-18

    Moving this ticket to engineering as I can reproduce this issue with 3.2.1 release and iOS simulator with the provided test case.
  2. Shameer Jan 2014-08-28

    Issue still exists with SDK Version 3.2.1 and 3.4.0 Titanium Command-Line Interface, CLI version 3.3.0, Titanium SDK version 3.2.1.GA Titanium SDK version 3.4.0.GA Appcelerator Studio, build: 3.3.0.201407111535 iOS SDK: 7.1
  3. Hans Knöchel 2016-04-27

    Hey [~martijnkooij], I would like to check this issue. Two questions beforehand: -Do you still experience it with latest 5.2.2.GA?- -Are you sure it is not native behavior? (I don't think so, but would like to verify before)- Thanks! *EDIT*: I figured out that iOS introduced two searchbar styles "prominent" (default) and "minimal"): - Prominent: http://abload.de/img/simulatorscreenshot27psk09.png - Minimal: http://abload.de/img/simulatorscreenshot27atkma.png We could expose those 2 constants so you could use "minimal" instead. The thing is, that it does not allow to tint the searchfield (inside the bar) directly, so that would be the downside. On the other hand, the current behavior (which is default), is meant to handle borders. Those are just applied to the subview of it, which gets overwritten internally on focus. What do you think, would the constants help? I like the ability to choose.
  4. Hans Knöchel 2016-04-27

    PR: https://github.com/appcelerator/titanium_mobile/pull/7971 Demo:
       
       var win1 = Titanium.UI.createWindow({  
           backgroundColor:'#fff'
       });
       
       var search = Ti.UI.createSearchBar({
       	style: Ti.UI.iOS.SEARCH_BAR_STYLE_MINIMAL // or SEARCH_BAR_STYLE_PROMINENT
       });
       
       var listView = Ti.UI.createListView({
       	searchView: search,
       	top: 20
       });
       
       var sections = [];
       
       var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
       var fruitDataSet = [
           {properties: { title: 'Apple'}},
           {properties: { title: 'Banana'}},
       ];
       fruitSection.setItems(fruitDataSet);
       sections.push(fruitSection);
       
       listView.sections = sections;
       
       win1.add(listView);
       win1.open();
       
  5. Harry Bryant 2016-07-06

    Verified as fixed, testing both MINIMAL & PROMINENT search bar styles, there are no longer any border issues upon focusing / blurring events. Tested On: iPhone 6S (9.3.2) Device & Simulator Mac OSX El Capitan 10.11.5 Ti SDK: 5.4.0.v20160705213725 Appc Studio: 4.7.0.201606220541 Appc NPM: 4.2.7-2 App CLI: 5.4.0-26 Xcode 7.3 Node v4.2.6 *Closing ticket.*

JSON Source