[TIMOB-7830] iOS: keyboardToolbar behavior issues with multiple text fields

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2012-03-30T21:58:31.000+0000
Affected Version/s	Release 2.0.0, Release 1.8.1
Fix Version/s	Sprint 2012-05, Release 2.0.0, Release 1.8.3
Components	iOS
Labels	SupportTeam, module_toolbar, qe-testadded
Reporter	Alan Leard
Assignee	Blain Hamon
Created	2012-02-27T17:19:08.000+0000
Updated	2013-11-07T05:20:58.000+0000

Description

Issue

-keyboardToolbar hides then shows when moving from one textField to another while the keyboard remains up -after selecting a different textField, when you come back to the first, the buttons are gone from the keyboardToolbar.

Repor Steps

-Build code below -Click on the top textField, then the second, then the third, then back to the first. -You will see the toolbar hide and show, then lose all of its buttons on the fourth focus.

Code

var win1 = Titanium.UI.createWindow({backgroundColor:'#fff'});

var send = Titanium.UI.createButton({
title : 'Send',
style : Titanium.UI.iPhone.SystemButtonStyle.DONE,
});

var camera = Titanium.UI.createButton({
systemButton : Titanium.UI.iPhone.SystemButton.CAMERA,
});

var cancel = Titanium.UI.createButton({
systemButton : Titanium.UI.iPhone.SystemButton.CANCEL
});

var flexSpace = Titanium.UI.createButton({
systemButton : Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});


var textfield1 = Titanium.UI.createTextField({
hintText : 'Focus to see keyboard with toolbar',
height : 35,
width : 300,
top : 50,
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_BEZEL,
keyboardToolbar : [cancel, flexSpace, camera, flexSpace, send],
keyboardToolbarColor : '#999',
keyboardToolbarHeight : 40,
});

var textfield2 = Titanium.UI.createTextField({
hintText : 'Focus to see keyboard with toolbar',
height : 35,
width : 300,
top : 100,
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_BEZEL,
keyboardToolbar : [cancel, flexSpace, camera, flexSpace, send],
keyboardToolbarColor : '#999',
keyboardToolbarHeight : 40,
});

var textfield3 = Titanium.UI.createTextField({
hintText : 'Focus to see keyboard with toolbar',
height : 35,
width : 300,
top : 150,
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_BEZEL,
keyboardToolbar : [cancel, flexSpace, camera, flexSpace, send],
keyboardToolbarColor : '#999',
keyboardToolbarHeight : 40,
});

win1.add(textfield1);
win1.add(textfield2);
win1.add(textfield3);

win1.open();

Comments

Stephen Tramer 2012-02-28

Bug is still valid; issue is separate from TIMOB-6463 and not resolved by it.
Stephen Tramer 2012-03-01

Assigning back to Neeraj to put into the pool, I will not have time to address this for this sprint.
Blain Hamon 2012-03-05

What's going on is that we might have to disallow button reuse like this, because it can lead to a lot of edge cases. Essentially, they want to add one view to two locations, which iOS doesn't support.

Blain Hamon 2012-03-06

So. Funny story. I was researching a solution where we reuse a Ti.UI.iOS.Toolbar, sharing it across the three textfields. And it turns out that there was a partial implementation that needed fixing. So using three arrays is still not supported for reasons above, but sharing a toolbar will now work, which actually makes life easier because the toolbar won't pop down and up. The new sample code is:

   var win1 = Titanium.UI.createWindow({backgroundColor:'#fff'});
   
   var send = Titanium.UI.createButton({
   title : 'Send',
   style : Titanium.UI.iPhone.SystemButtonStyle.DONE,
   });
   
   var camera = Titanium.UI.createButton({
   systemButton : Titanium.UI.iPhone.SystemButton.CAMERA,
   });
   
   var cancel = Titanium.UI.createButton({
   systemButton : Titanium.UI.iPhone.SystemButton.CANCEL
   });
   
   var flexSpace = Titanium.UI.createButton({
   systemButton : Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
   });
   
   var toolbar1 = Titanium.UI.iOS.createToolbar({
   	items:[cancel, flexSpace, camera, flexSpace, send],
   	borderTop:true,
   	borderBottom:false,
   	translucent:true,
   	barColor:'#999'
   });
   
   var textfield1 = Titanium.UI.createTextField({
   hintText : 'Focus to see keyboard with toolbar',
   height : 35,
   width : 300,
   top : 50,
   borderStyle : Titanium.UI.INPUT_BORDERSTYLE_BEZEL,
   keyboardToolbar : toolbar1,
   });
   
   var textfield2 = Titanium.UI.createTextField({
   hintText : 'Focus to see keyboard with toolbar',
   height : 35,
   width : 300,
   top : 100,
   borderStyle : Titanium.UI.INPUT_BORDERSTYLE_BEZEL,
   keyboardToolbar : toolbar1,
   });
   
   var textfield3 = Titanium.UI.createTextField({
   hintText : 'Focus to see keyboard with toolbar',
   height : 35,
   width : 300,
   top : 150,
   borderStyle : Titanium.UI.INPUT_BORDERSTYLE_BEZEL,
   keyboardToolbar : toolbar1,
   });
   
   win1.add(textfield1);
   win1.add(textfield2);
   win1.add(textfield3);
   
   win1.open();

Michael Pettiford 2012-03-13

Closing issue Tested with Ti Studio build 1.0.9.201202141208 Ti Mob SDK 2.0.0.v20120312213243 OSX Lion 10.7.3 iPhone 4S Testing with Blain's new sample code and the issue does not exist
Michael Pettiford 2012-07-09

Closing issue: Was reopened after adding/removing labels. Tested with Ti Studio build 2.1.0.201206251749 Ti Mobile SDK 2.1.0.v20120628121617 hash r6e3cab6a OSX Lion 10.7.3 iPhone 4 OS 5.0.1
Shameer Jan 2013-11-07

Anvil testcase PR https://github.com/appcelerator/titanium_mobile/pull/4768

JSON Source