[TIMOB-23634] iOS: Toolbar on TextField doesn't hide smoothly when calling blur

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2018-01-10T11:18:16.000+0000
Affected Version/s	Release 5.3.1
Fix Version/s	Release 7.0.2
Components	iOS
Labels	TCSupportTriage, escalation, ios8, merge-7.0.2, toolbar
Reporter	Phil Smithson
Assignee	Vijay Singh
Created	2014-11-12T04:17:07.000+0000
Updated	2018-01-24T23:11:27.000+0000

Description

Setup: >Textfield with a Ti.UI.IOS.Toolbar with one button. >Click eventlistener on the button which calls .blur() on the textfield The keypad slides down, leaving the Toolbar at the top. When the keypad has slid off the page, only then does the Toolbar start to slide down. Here's a slow-mo GIF: http://i.stack.imgur.com/x2zc2.gif Sample code: Causes a noticeable flash for the user.

Attachments

File	Date	Size
x2zc2.gif	2014-11-12T04:17:07.000+0000	340175

Comments

Motiur Rahman 2014-11-18

Hello, We have tested this issue but we did not reproduce it. Toolbar on TextField is hidden smoothly when calling blur. *Result:* It works as expected.

Testing Environment:

Titanium SDK: 3.4.1 Titanium CLI: 3.4.1 iOS Version: 8.1 iPad 5G, OS X Version: 10.9.5, Appcelerator Studio: 3.4.1

Steps to Test:

1. Create an Alloy project. 3. Run this code with the testing environment. 4. Touch the textField and click the done button.

Test Code

   $.doneContact.addEventListener('click', function() {
   	$.txt_contactNumber.blur();
   });
   
   $.index.open();

   <Alloy>
   	<Window title="Red Window" backgroundColor="#fff"  title="textField">
   		<TextField id="txt_contactNumber" keyboardToolbarColor="#999" keyboardToolbarHeight="40" top="30" width="200" height="50" borderStyle="Ti.UI.INPUT_BORDERSTYLE_ROUNDED" keyboardType = "Titanium.UI.KEYBOARD_NUMBER_PAD">
   			<KeyboardToolbar>
   				<Toolbar id="numberToolbar" bottom="0">
   					<Items>
   						<Button id="flexSpace" systemButton="Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE" />
   						<Button id="doneContact" style="Ti.UI.iPhone.SystemButtonStyle.DONE">Done</Button>
   					</Items>
   				</Toolbar>
   			</KeyboardToolbar>
   		</TextField>
   	</Window>
   </Alloy>

Thanks.

Phil Smithson 2014-12-08

any update on this? It's annoying as the effect is to make the application look amateurish
Mauro Parra-Miranda 2014-12-09

Hello [~philsmithson]! Can you please take a look to the above testcase? Thanks!
Brian Knorr 2015-11-06

This should be re-opened...still happens in latest Ti SDK 5.0.2.GA
Neeraj Mishra 2016-07-13

We can reproduce the issue in kitchen sink app and click on TextField-->ToolBar. Click on any of the text field and this will pop up the keyboard toolbar and softkeyboard. The keyboard toolbar animates faster than the keyboard and once we click on send, keyboard toolbar animates slower than the soft keyboard and then disappears.
Ygor Lemos 2016-07-27

Any news on this one? Seems to be happening for a long time...
Chee Kiat Ng 2016-10-26

PR here. https://github.com/appcelerator/titanium_mobile/pull/8549 See comments on PR.
Shuo Liang 2017-01-25

Update?

Vijay Singh 2017-12-06

PR: https://github.com/appcelerator/titanium_mobile/pull/9656 Test Case 1.

   var win = Ti.UI.createWindow({backgroundColor: 'white'});
    
   var view = Ti.UI.createView({backgroundColor : 'green'});
   view.addEventListener('click', function() {
     textfield.blur();
    });
    
   var camera = Ti.UI.createButton({
       systemButton : Titanium.UI.iOS.SystemButton.CAMERA,
   });
    
   camera.addEventListener("click", function(){
     Ti.API.info('Tool bar will set to a custom view');
     textfield.setKeyboardToolbar(view);
   });
   
   var cancel = Ti.UI.createButton({
       systemButton : Titanium.UI.iOS.SystemButton.CANCEL
   });
   cancel.addEventListener("click", function(){
     textfield.blur();
   });
    
   var flexSpace = Ti.UI.createButton({
       systemButton : Titanium.UI.iOS.SystemButton.FLEXIBLE_SPACE
   });
    
   var textfield = Ti.UI.createTextField({
       borderStyle : Ti.UI.INPUT_BORDERSTYLE_BEZEL,
       hintText : 'Focus to see keyboard with toolbar',
       keyboardToolbar : [camera, flexSpace, cancel],
       keyboardToolbarColor : '#999',
       keyboardToolbarHeight : 40,
       top : 80,
       width : 300, 
       height : 35
   });
    
   var trash = Ti.UI.createButton({
       systemButton : Titanium.UI.iOS.SystemButton.TRASH,
   });
   trash.addEventListener("click", function(){
     Ti.API.info('Tool bar will remove tollbar');
     textArea.setKeyboardToolbar(null);
   });
   
    
   var done = Ti.UI.createButton({
       systemButton : Titanium.UI.iOS.SystemButton.DONE
   });
   done.addEventListener("click", function(){
     textArea.blur();
   });
    
   var flexSpace1 = Ti.UI.createButton({
       systemButton : Titanium.UI.iOS.SystemButton.FLEXIBLE_SPACE
   });
   
   var textArea = Ti.UI.createTextArea({
       backgroundColor: 'lightGray',
       value : 'Focus to see keyboard with toolbar',
       keyboardToolbar : [trash, flexSpace1, done],
       keyboardToolbarColor : 'red',
       keyboardToolbarHeight : 40,
       top : 180,
       width : 300, 
       height : 60
   });
    
   win.add(textfield);
   win.add(textArea);
   win.open();

Test Case 2 (Textfield on scroll view. Textfield should scroll up to be visible).

   var win = Ti.UI.createWindow({backgroundColor: 'white'});
    
   var scrollView = Ti.UI.createScrollView({backgroundColor: 'blue'});
   
   var camera = Ti.UI.createButton({
       systemButton : Titanium.UI.iOS.SystemButton.CAMERA,
   });
   var cancel = Ti.UI.createButton({
       systemButton : Titanium.UI.iOS.SystemButton.CANCEL
   });
   cancel.addEventListener("click", function(){
     textfield.blur();
   });
    
   var flexSpace = Ti.UI.createButton({
       systemButton : Titanium.UI.iOS.SystemButton.FLEXIBLE_SPACE
   });
    
   var textfield = Ti.UI.createTextField({
       borderStyle : Ti.UI.INPUT_BORDERSTYLE_BEZEL,
       hintText : 'Focus to see keyboard with toolbar',
       keyboardToolbar : [camera, flexSpace, cancel],
       keyboardToolbarColor : '#999',
       keyboardToolbarHeight : 40,
       top : 380,
       width : 300, height : 35
   });
   
   scrollView.add(textfield);
   win.add(scrollView);
   win.open();

Abir Mukherjee 2018-01-05

FR passed.
Eric Merriman 2018-01-09

[~vijaysingh] Please back port, thanks!
Vijay Singh 2018-01-10

PR (7_0_X) : https://github.com/appcelerator/titanium_mobile/pull/9712
Abir Mukherjee 2018-01-24

Verified fix is found in: SDK 7.0.2.v20180124113923 SDK 7.1.0.v20180124115505

JSON Source