{ "id": "126383", "key": "TIMOB-16471", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "10153", "key": "TIMOB", "name": "Titanium SDK/CLI", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [ { "id": "17706", "name": "Release 5.4.0", "archived": false, "released": true, "releaseDate": "2016-08-11" } ], "resolution": { "id": "1", "description": "A fix for this issue is checked into the tree and tested.", "name": "Fixed" }, "resolutiondate": "2016-04-27T17:06:53.000+0000", "created": "2014-02-13T20:07:09.000+0000", "priority": { "name": "Low", "id": "4" }, "labels": [ "animation", "border", "qe-5.4.0", "searchbar" ], "versions": [ { "id": "15856", "description": "Release 3.2.1", "name": "Release 3.2.1", "archived": false, "released": true, "releaseDate": "2014-02-10" } ], "issuelinks": [], "assignee": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "updated": "2016-07-06T17:58:24.000+0000", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [ { "id": "10206", "name": "iOS", "description": "iOS Platform" } ], "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.\r\n\r\n1. 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?)\r\n\r\n2. 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.\r\n\r\n3. 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...\r\n\r\nI 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.\r\n\r\n{code}\r\n// this sets the background color of the master UIView (when there are no windows/tab groups on it)\r\nTitanium.UI.setBackgroundColor('#000');\r\n\r\n// create tab group\r\nvar tabGroup = Titanium.UI.createTabGroup();\r\n\r\n\r\n//\r\n// create base UI tab and root window\r\n//\r\nvar win1 = Titanium.UI.createWindow({ \r\n title:'Tab 1',\r\n backgroundColor:'#fff'\r\n});\r\nvar tab1 = Titanium.UI.createTab({ \r\n icon:'KS_nav_views.png',\r\n title:'Tab 1',\r\n window:win1\r\n});\r\n\r\n\tvar search = Ti.UI.createSearchBar({\r\n\t\tbarColor: '#FFFFFF',\r\n\t\tborderColor: 'white'\r\n\t});\r\n\tsearch.addEventListener('cancel', function() {\r\n\t\tsearch.blur();\r\n\t});\r\n\r\n\tvar listView = Ti.UI.createListView({\r\n\t\tsearchView: search,\r\n\t\ttop: 10\r\n\t});\r\n\r\n\tvar sections = [];\r\n\t\r\n\tvar fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});\r\n\tvar fruitDataSet = [\r\n\t {properties: { title: 'Apple'}},\r\n\t {properties: { title: 'Banana'}},\r\n\t];\r\n\tfruitSection.setItems(fruitDataSet);\r\n\tsections.push(fruitSection);\r\n\t\r\n\tvar vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});\r\n\tvar vegDataSet = [\r\n\t {properties: { title: 'Carrots'}},\r\n\t {properties: { title: 'Potatoes'}},\r\n\t];\r\n\tvegSection.setItems(vegDataSet);\r\n\tsections.push(vegSection);\r\n\t\r\n\tlistView.sections = sections;\r\n\r\n\twin1.add(listView);\r\n\r\n//\r\n// create controls tab and root window\r\n//\r\nvar win2 = Titanium.UI.createWindow({ \r\n title:'Tab 2',\r\n backgroundColor:'#fff'\r\n});\r\nvar tab2 = Titanium.UI.createTab({ \r\n icon:'KS_nav_ui.png',\r\n title:'Tab 2',\r\n window:win2\r\n});\r\n\r\nvar label2 = Titanium.UI.createLabel({\r\n\tcolor:'#999',\r\n\ttext:'I am Window 2',\r\n\tfont:{fontSize:20,fontFamily:'Helvetica Neue'},\r\n\ttextAlign:'center',\r\n\twidth:'auto'\r\n});\r\n\r\nwin2.add(label2);\r\n\r\n\r\n\r\n//\r\n// add tabs\r\n//\r\ntabGroup.addTab(tab1); \r\ntabGroup.addTab(tab2); \r\n\r\n\r\n// open tab group\r\ntabGroup.open();\r\n{code}", "attachment": [ { "id": "45901", "filename": "search_focus_blur_border.mov", "author": { "name": "martijnkooij", "key": "martijnkooij", "displayName": "Martijn Kooij", "active": true, "timeZone": "Europe/Berlin" }, "created": "2014-02-13T20:07:09.000+0000", "size": 4120303, "mimeType": "video/quicktime" } ], "flagged": false, "summary": "iOS: Ugly / inconsistent border effects when focussing / blurring searchbar", "creator": { "name": "martijnkooij", "key": "martijnkooij", "displayName": "Martijn Kooij", "active": true, "timeZone": "Europe/Berlin" }, "subtasks": [], "reporter": { "name": "martijnkooij", "key": "martijnkooij", "displayName": "Martijn Kooij", "active": true, "timeZone": "Europe/Berlin" }, "environment": null, "closedSprints": [ { "id": 624, "state": "closed", "name": "2016 Sprint 09 SDK", "startDate": "2016-04-23T00:39:45.452Z", "endDate": "2016-05-07T00:39:00.000Z", "completeDate": "2016-05-09T03:43:10.279Z", "originBoardId": 114 } ], "comment": { "comments": [ { "id": "293486", "author": { "name": "ragrawal", "key": "ragrawal", "displayName": "Ritu Agrawal", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Moving this ticket to engineering as I can reproduce this issue with 3.2.1 release and iOS simulator with the provided test case.", "updateAuthor": { "name": "ragrawal", "key": "ragrawal", "displayName": "Ritu Agrawal", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2014-02-18T04:18:14.000+0000", "updated": "2014-02-18T04:18:14.000+0000" }, { "id": "320771", "author": { "name": "shameerj", "key": "shameerj", "displayName": "Shameer Jan", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Issue still exists with SDK Version 3.2.1 and 3.4.0\r\n\r\nTitanium Command-Line Interface, \r\nCLI version 3.3.0, \r\nTitanium SDK version 3.2.1.GA \r\nTitanium SDK version 3.4.0.GA \r\nAppcelerator Studio, build: 3.3.0.201407111535 \r\niOS SDK: 7.1", "updateAuthor": { "name": "shameerj", "key": "shameerj", "displayName": "Shameer Jan", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2014-08-28T09:40:04.000+0000", "updated": "2014-08-28T09:40:04.000+0000" }, { "id": "384064", "author": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "body": "Hey [~martijnkooij], I would like to check this issue. Two questions beforehand:\r\n-Do you still experience it with latest 5.2.2.GA?-\r\n-Are you sure it is not native behavior? (I don't think so, but would like to verify before)-\r\n\r\nThanks!\r\n\r\n*EDIT*: I figured out that iOS introduced two searchbar styles \"prominent\" (default) and \"minimal\"):\r\n- Prominent: http://abload.de/img/simulatorscreenshot27psk09.png\r\n- Minimal: http://abload.de/img/simulatorscreenshot27atkma.png\r\n\r\nWe 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.", "updateAuthor": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2016-04-27T10:40:57.000+0000", "updated": "2016-04-27T11:00:38.000+0000" }, { "id": "384066", "author": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "body": "PR: https://github.com/appcelerator/titanium_mobile/pull/7971\r\n\r\nDemo:\r\n{code:javascript}\r\n\r\nvar win1 = Titanium.UI.createWindow({ \r\n backgroundColor:'#fff'\r\n});\r\n\r\nvar search = Ti.UI.createSearchBar({\r\n\tstyle: Ti.UI.iOS.SEARCH_BAR_STYLE_MINIMAL // or SEARCH_BAR_STYLE_PROMINENT\r\n});\r\n\r\nvar listView = Ti.UI.createListView({\r\n\tsearchView: search,\r\n\ttop: 20\r\n});\r\n\r\nvar sections = [];\r\n\r\nvar fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});\r\nvar fruitDataSet = [\r\n {properties: { title: 'Apple'}},\r\n {properties: { title: 'Banana'}},\r\n];\r\nfruitSection.setItems(fruitDataSet);\r\nsections.push(fruitSection);\r\n\r\nlistView.sections = sections;\r\n\r\nwin1.add(listView);\r\nwin1.open();\r\n{code}", "updateAuthor": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2016-04-27T11:27:30.000+0000", "updated": "2016-04-27T11:27:30.000+0000" }, { "id": "389981", "author": { "name": "htbryant", "key": "htbryant", "displayName": "Harry Bryant", "active": true, "timeZone": "Europe/London" }, "body": "Verified as fixed, testing both MINIMAL & PROMINENT search bar styles, there are no longer any border issues upon focusing / blurring events.\r\n\r\nTested On:\r\niPhone 6S (9.3.2) Device & Simulator\r\nMac OSX El Capitan 10.11.5 \r\nTi SDK: 5.4.0.v20160705213725\r\nAppc Studio: 4.7.0.201606220541\r\nAppc NPM: 4.2.7-2\r\nApp CLI: 5.4.0-26\r\nXcode 7.3\r\nNode v4.2.6\r\n\r\n*Closing ticket.*\r\n", "updateAuthor": { "name": "htbryant", "key": "htbryant", "displayName": "Harry Bryant", "active": true, "timeZone": "Europe/London" }, "created": "2016-07-06T17:58:10.000+0000", "updated": "2016-07-06T17:58:10.000+0000" } ], "maxResults": 5, "total": 5, "startAt": 0 } } }