Here is a quick solution to add Auto-Size functionality to TextInput control in Flex 3.
AutoSizeTextInput.class
package com.tushar.controls {
import flash.events.Event;
import mx.controls.TextInput;
public class AutoSizeTextInput extends TextInput {
private var txtSpan:uint = 10;
public function AutoSizeTextInput() {
super();
this.addEventListener(Event.CHANGE, onTextChange);
}
private function onTextChange(evnt:Event):void {
this.textField.scrollH = 0;
this.width = this.autoSizeWidth;
}
override protected function commitProperties():void {
super.commitProperties();
this.textField.scrollH = 0;
this.width = this.autoSizeWidth;
}
private function get autoSizeWidth():uint {
return (this.textWidth+txtSpan);
}
}
}
Usage in MXML:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="com.tushar.controls.*" layout="vertical"> <custom:AutoSizeTextInput text="Hello world! "/> </mx:Application>
Not sure if this method is perfect! Do let me know if there is any better way to implement this 
It was written for Flex 2, but it should still work. Here’s my Auto-Resizing TextInput control for Flex. It takes a different approach to the implementation.
By: Josh Tynjala on November 21, 2008
at 12:56 am
I tried this before but was not working for me in Flex 3!
By: Tushar on November 21, 2008
at 9:39 am
Better way:
package components {
import flash.events.Event;
import mx.controls.TextInput;
public class AutoSizeTextInput extends TextInput {
private var txtSpan:uint = 10;
public function AutoSizeTextInput() {
super();
this.addEventListener(Event.CHANGE, onTextChange);
}
private function onTextChange(evnt:Event):void {
this.textField.scrollH = 0;
this.width = this.autoSizeWidth;
}
override protected function commitProperties():void {
super.commitProperties();
this.textField.scrollH = 0;
this.width = this.autoSizeWidth;
this.validateNow();
}
private function get autoSizeWidth():uint {
var retValue:uint = this.textWidth + txtSpan;
if( this.minWidth > this.textWidth + txtSpan )
retValue = this.minWidth;
return retValue;
}
}
}
By: DIGITALUnderworld on August 10, 2009
at 6:52 pm
Tushar & DIGITALUnderworld
If I “Focus Into” or “Press Right Arrow” on the End of input Text, it scrolls.
Josh
doesn’t have that Problem, but width would fit for shorter Text (also at the beginning)
By: trevorc on September 10, 2009
at 9:03 am
Thanks for the post.
By: murugesan munusamy on September 17, 2009
at 5:32 am
package components {
import flash.events.Event;
import flash.text.TextFieldAutoSize;
import mx.controls.TextInput;
public class AutoSizeTextInput extends TextInput {
public function AutoSizeTextInput() {
super();
this.addEventListener(Event.CHANGE, function(event:Event) {
invalidateSize();
});
}
override protected function childrenCreated():void {
this.textField.autoSize = TextFieldAutoSize.LEFT;
super.childrenCreated();
}
}
}
By: Vitaliy Tsvayer on November 7, 2009
at 7:12 pm
And similar for TextArea:
package components {
import flash.events.Event;
import flash.text.TextFieldAutoSize;
import mx.controls.TextArea;
public class AutoSizeTextInput extends TextArea {
public function AutoSizeTextInput() {
super();
this.setStyle(“horizontalScrollPolicy”, “off”);
this.setStyle(“verticalScrollPolicy”, “off”);
this.addEventListener(Event.CHANGE, function(event:Event) {
invalidateSize();
});
}
override protected function childrenCreated():void {
this.textField.autoSize = TextFieldAutoSize.LEFT;
this.textField.wordWrap = false;
super.childrenCreated();
}
override protected function measure():void {
super.measure();
measuredWidth = textField.width;
measuredHeight = textField.height;
}
}
}
By: Vitaliy Tsvayer on November 7, 2009
at 7:30 pm
sorry, in textarea example above replace:
this.setStyle(“horizontalScrollPolicy”, “off”);
this.setStyle(“verticalScrollPolicy”, “off”);
with this:
horizontalScrollPolicy = “off”;
verticalScrollPolicy = “off”;
By: Vitaliy Tsvayer on November 7, 2009
at 7:36 pm