Tuesday, September 23, 2008

mx:TextInput bug from Flexosaurus

Nearly five months ago I noticed mx:TextInput's bug. The following steps will reproduce the bug.

In the Application 1

- Enter some long string in the mx:TextInput e.g. "asd asdsa sadsadsa sadsad asdsa"

- Click on the "Button" button(it is setting text in the mx:TextInput to "yes")

- You will not be able to see the text in the mx:TextInput, you will be able to see the text if you e.g. click on the mx:TextInput

Application 1




<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="300" height="50" layout="absolute">

<mx:Script>

<![CDATA[

private function clickBtn(event:MouseEvent):void
{
txtInput.text = "yes";

}
]]>

</mx:Script>

<mx:Button id="btnSubmit" x="178" y="10" label="Button"
click="clickBtn(event)"/>
<mx:TextInput id="txtInput" x="10" y="10"/>

</mx:Application>



There is a few ways for fixing this problem. Here is one of them. We will create custom text input component and override public function set text(value:String):void function. In the text setter we will call initialize mx:TextInput text property (super.text = value;) and then we'll just bring the cursor to the begging.

Reproduce the bug for the Application 2 and you will be able to see the text.

Application 2




<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:ns1="*"
width="300" height="50" layout="absolute">

<mx:Script>

<![CDATA[

private function clickBtn(event:MouseEvent):void
{
txtInput.text = "yes";

}
]]>

</mx:Script>

<mx:Button id="btnSubmit" x="178" y="10" label="Button"
click="clickBtn(event)"/>
<ns1:CustomTextInput id="txtInput" x="10" y="10"/>

</mx:Application>


CustomTextInput.as

package
{
import mx.controls.Alert;
import mx.controls.TextInput;

public class CustomTextInput extends TextInput
{
public function CustomTextInput()
{
super();
}

override public function set text(value:String):void
{
super.text = value;

// Bringing cursor to the beginning
setSelection(1,1);
}
}
}

No comments: