Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-9718] MobileWeb: textField events generate bad behaviors

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionInvalid
Resolution Date2012-06-21T23:13:59.000+0000
Affected Version/sRelease 2.1.0
Fix Version/sn/a
ComponentsMobileWeb
LabelsSupportTeam
ReporterFederico Casali
AssigneeChris Barber
Created2012-06-21T22:48:52.000+0000
Updated2014-06-19T12:44:39.000+0000

Description

Problem description

Setting event listeners (tested using 'blur', 'focus' and 'change') to a textField results in getting bad behaviors, depending on the browser (tested on Firefox and Safari)

Steps to reproduce

Run sample code and click on the textField. Result: Firefox: blur and focus events are triggered, then textField it's not focused. Safari: blur and focus events are triggered continuously (then have to actually kill the browser in this case)
var  win = Titanium.UI.createWindow({
                    backgroundColor:'#000'
                });
 
var inputTextField = Titanium.UI.createTextField({
        color : '#ff7c00',
        top:10,
        height : 50,
        width : '25%',
        left : '10%',
        borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
        keyboardType : Titanium.UI.KEYBOARD_NUMBERS_PUNCTUATION,
        returnKeyType : Titanium.UI.RETURNKEY_DONE,
        font : {
            fontSize : 20,
            fontColor : '#ff7c00',
            fontWeight : 'bold',
            fontFamily : 'Helvetica Neue'
        }
    });
inputTextField.addEventListener('focus',function(){
    alert('focus');
    Ti.API.info('focus');
});
inputTextField.addEventListener('blur',function(){
    alert('blur');
    Ti.API.info('blur');
});
inputTextField.addEventListener('change',function(){
   alert('change');
   Ti.API.info('change');
});

win.add(inputTextField);
win.open();

Additional Notes:

Set only one single event to be triggered. Result: only the 'focus' event it's not behaving correctly: Firefox: focus event triggered, textField it's not being focused. Other events work fine. Safari: focus event triggered continuously. Other events work fine. However, there are issues when setting 'blur' and 'change' events together: Firefox: typing a character, also the blur event it's triggered (should be triggered only the change one) Safari: typing a character, the blur event it's triggered continuously (have to kill the browser in this case too)

Comments

  1. Chris Barber 2012-06-21

    When you do an alert(), it blurs the text field. When you blur the textfield, it does an alert(). When you close the alert() it focuses the textfield, which does an alert() which blurs the textfield and so on. This is just how the browser works. Don't use alert() for events. Use the console. In my testing, if I remove the alerts, the change and blur events work just fine.

JSON Source