[TIMOB-16844] iOS: SearchBar focused in ScrollView, scrolling does not work

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Won't Fix
Resolution Date	2014-06-10T21:48:40.000+0000
Affected Version/s	Release 3.2.2
Fix Version/s	n/a
Components	iOS
Labels	ScrollView, SearchBar, iOS7
Reporter	Shannon Hicks
Assignee	Ingo Muschenetz
Created	2014-04-10T16:40:31.000+0000
Updated	2017-03-23T22:36:54.000+0000

Description

Symptom: You have a ScrollView with a SearchBar inside. When a SearchBar is the first text input that is focused, the keyboard will cover up the ScrollView, and not scroll any differently than if the keyboard was not displayed. Expected: The ScrollView should resize itself to the available space on the screen, allowing for scrolling if necessary. Workaround: None that are acceptable. You can put whitespace at the end of your ScrollView content, but that's a poor user experience.

<Alloy>
	<Window backgroundColor="#fff">
		<ScrollView top="0" bottom="0" left="0" right="0" layout="vertical">
			<Label id="justAddingSpace" text="Click here to hide keyboard" height="400" width="200" bottom="10" color="#fff" backgroundColor="#C00" onClick="doBlur"/>
			<TextField id="myTextField" width="250" border="1" borderColor="#000"></TextField>
			<SearchBar id="mySearchBar" top="10" bottom="10" height="50"></SearchBar>
			<Button id="btn" title="Button At The End" bottom="20" onClick="doBlur"/>
		</ScrollView>
	</Window>
</Alloy>

var doBlur = function() {
	$.myTextField.blur();
	$.mySearchBar.blur();
};

$.index.open();

Attachments

File	Date	Size
open_state.png	2014-04-10T16:40:31.000+0000	26518
searchbar_focused_first.png	2014-04-10T16:40:31.000+0000	111964
textfield_focused_first.png	2014-04-10T16:40:31.000+0000	72418

Comments

Ritu Agrawal 2014-04-14

Moving this ticket to engineering as I can reproduce this issue with Titanium SDK 3.2.2 GA on iOS simulator.

Sabil Rahim 2014-04-29

commonjs

   // this sets the background color of the master UIView (when there are no windows/tab groups on it)
   Titanium.UI.setBackgroundColor('#000');
   var doblur = function() {
       myTextField.blur();
       searchBar.blur();
   };
   var win1 = Titanium.UI.createWindow({backgroundColor:'#fff'});
   var scrollView = Ti.UI.createScrollView({
   	top:0,
   	bottom :0,
   	left:0,
   	right:0,
   	layout:"vertical"
   });
   
   
   var justAddingSpace = Ti.UI.createLabel({
   	text:"Click here to hide Keyboard",
   	height:400,
   	height:"400", 
   	width:"200", 
   	bottom:"10", 
   	color:"#fff", 
   	backgroundColor:"#C00"
   });
   
   justAddingSpace.addEventListener("click",doblur);
   
   var myTextField = Ti.UI.createTextField({
   	width:250,
   	border:1,
   	borderColor:"#000",
   });
   
   var searchBar = Ti.UI.createSearchBar({ top: 10, bottom:10, height:50});
   
   var btn = Ti.UI.createButton({title:"Button At the End", bottom:20});
   btn.addEventListener("click",doblur);
   
   
   scrollView.add(justAddingSpace);
   scrollView.add(myTextField);
   scrollView.add(searchBar);
   scrollView.add(btn);
   
   win1.add(scrollView);
   win1.open();

Malcolm Hollingsworth 2014-05-21

Any idea when this will be resolved? This is the sort of issue that makes people think that Titanium apps are not quite proper apps. It falls into the category of the old label problem on a tableViewRow when it was selected a Titanium app was not able change the label colour and then back again - it looked cheap and an almost app - then the property highlightedColor was added - and that tiny change meant we no longer looked an almost app.

Radamantis Torres-Lechuga 2014-06-10

Since this is not a common UI/UX experience, we are not going to fix this issue, the workaround is to create a component to replicate the behavior with a textfield.

   var doBlur = function() {
       $.myTextField.blur();
       $.myTextFieldSearch.blur();
   };
   //You should code all the behavior for the textfield here in the controller
   $.index.open();

   <Alloy>
       <Window backgroundColor="#fff">
           <ScrollView top="0" bottom="0" left="0" right="0" layout="vertical">
               <Label id="justAddingSpace" text="Click here to hide keyboard" height="400" width="200" bottom="10" color="#fff" backgroundColor="#C00" onClick="doBlur"/>
               <TextField id="myTextField" width="250" border="1" borderColor="#000"></TextField>
               <TextField id="myTextFieldSearch" width="250" border="5" borderColor="yellow" hintText="SearchBar"></TextField>
           </ScrollView>
       </Window>
   </Alloy>

Lee Morris 2017-03-23

Closing ticket as Won't Fix with reference to the above comments.

JSON Source