The key lies in the skin of the DropDownList - DropDownListSkin which uses a PopUpAnchor to control the opening and closing of the drop down options. Here in lies the problem. By default, it sets the popUpWidthMatchesAnchorWidth=true on the PopUpAnchor. To make the DropDownList auto expanding, all that needs to be done is to create a new skin which would be an exact copy of the DropDownListSkin and just set the popUpWidthMatchesAnchorWidth=false as shown below:
<s:PopUpAnchor id="popUp" displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
As easy as that! Another way of doing it would be through ActionScipt. For this, you need to create a new component extending from the DropDownList and set the popUpWidthMatchesAnchorWidth false in the new component. The source is shown below:
public class AutoExpandDropDownList extends DropDownList
public var popUp : PopUpAnchor;
override protected function partAdded( partName : String, instance : Object ) : void
super.partAdded( partName, instance );
if (instance == popUp)
popUp.popUpWidthMatchesAnchorWidth = false;
A sample application to show the difference between the normal DropDownList and the auto expanding one :
Notice that the drop down of the list on the right automatically grows. However, the auto expansion is a bit flaky as it jumps around in size when it encounters a lengthier data in the dataprovider. A better way would be to possibly give the drop down a fixed width which I will try to look into in another post. Since the ComboBox and the DropDownList basically work on the same principle, the same trick can be applied to get a auto expanding ComboBox as well.
Download the source