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)
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.