[AC-2247] iOS: (3.2.0) attributedString doesn't work properly with TextField and passwordMask

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Closed
Resolution	Not Our Bug
Resolution Date	2013-12-04T18:12:35.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	n/a
Labels	attributedString, iphone, passwordmask, textfield, triage
Reporter	Matej
Assignee	Shak Hossain
Created	2013-12-03T14:34:46.000+0000
Updated	2016-03-08T07:41:15.000+0000

Description

attributedString doesn't work properly with TextField that has passwordMask.

Steps to reproduce:

- Start the application - Click (Focus) second TextField with password. - Click (Focus) first TextField without passwordMask property - *TextField with password will lose its style* *index.tss*

"Window":{
	backgroundColor: "black"
}

"TextField":{
	width: 300, height: 40,
	top: 10,
	backgroundColor: "#B2B2B2",
	borderColor: "red"
}

*index.xml*

<Alloy>
    <Window id="win">
    	<View width="Ti.UI.FILL" height="Ti.UI.SIZE" top="100" layout="vertical">
	    	<TextField id="textField_1"/>
	    	<TextField id="textField_2" passwordMask="true"/>
    	</View>
    </Window>
</Alloy>

*index.js*

var text = "text";

$.textField_1.attributedString = Ti.UI.iOS.createAttributedString({
	text: text,
	attributes: [
		{
			type: Ti.UI.iOS.ATTRIBUTE_FOREGROUND_COLOR,
			value: "white",
			range: [0, text.length]
		}
	]
});
 

$.textField_2.attributedString = Ti.UI.iOS.createAttributedString({
	text: text,
	attributes: [
		{
			type: Ti.UI.iOS.ATTRIBUTE_FOREGROUND_COLOR,
			value: "white",
			range: [0, text.length]
		}
	]
});

$.win.open();

Comments

Pedro Enrique 2013-12-04

This is an iOS issue as demonstrated in this native iOS code: http://pastie.org/8528800

Workaround:

Create a new attributed string on textfield blur

   var win = Ti.UI.createWindow({
   	backgroundColor: '#fff'
   });
   
   var text = "text";
   
   function FieldAttribute(_text) {
   	return  Ti.UI.iOS.createAttributedString({
   	    text: _text,
   	    attributes: [
   	        {
   	            type: Ti.UI.iOS.ATTRIBUTE_FOREGROUND_COLOR,
   	            value: "white",
   	            range: [0, _text.length]
   	        }
   	    ]
   	});
   }
   
   var textField = Ti.UI.createTextField({
   	width: 300, height: Ti.UI.SIZE, top: 100,
       backgroundColor: '#B2B2B2',
       borderColor: 'red',
       passwordMask: true,
       attributedString: FieldAttribute(text)
   });
   
   win.add(textField);
   
   win.open();
   
   textField.addEventListener('blur', function(e){
   	textField.attributedString = FieldAttribute(e.value);
   });

Matej 2013-12-05

Hi Pedro, thanks for workaround ,but I have another problem. Try to change a little bit attributes:

   attributes: [
   			{
   				type: Ti.UI.iOS.ATTRIBUTE_FOREGROUND_COLOR,
   				value: "white",
   				range: [0, text.length]
   			},
   			{
   				type: Ti.UI.iOS.ATTRIBUTE_FONT,
   				value: {fontSize: 10, fontFamily: "Avenir-Medium"},
   				range: [0, text.length]
   			}
   		]

and font will change also its size. I have tried to make workaround using focus&blur events ,but unsuccessfully. Can you help me with that please? Thanks

Matej 2013-12-11
Shak Hossain 2014-01-15
Matej 2014-01-16

JSON Source