Adjust position of dropdownwidth in spark combobox when dataprovider changes

Question

I am using property popUpWidthMatchesAnchorWidth="false" in combobbox skin to set maximum width of dropdown. In this everytime updating dataprovider on user types in combobox.whenever dataprovider changes,dropdown width is not adjusting to maximum width and also not positioning properly.

On Dataprovider change I want to set dropdown width to maximum width of the element and also align position of dropdown properly.

    [HostComponent("spark.components.ComboBox")]
    ]]>
</fx:Metadata> 

<fx:Script fb:purpose="styling">
    <![CDATA[       
        private var paddingChanged:Boolean;
        private var cornerRadiusChanged:Boolean;
        private var cornerRadius:Number = 0;            
        static private const contentFill:Array = ["bgFill"];
        override public function get contentItems():Array { return contentFill };

        override protected function commitProperties():void
        {
            super.commitProperties();

            if (paddingChanged && textInput)
            {

                var padding:Number;

                padding = getStyle("paddingLeft");
                if (textInput.getStyle("paddingLeft") != padding)
                    textInput.setStyle("paddingLeft", padding);

                padding = getStyle("paddingTop");
                if (textInput.getStyle("paddingTop") != padding)
                    textInput.setStyle("paddingTop", padding);

                padding = getStyle("paddingRight");
                if (textInput.getStyle("paddingRight") != padding)
                    textInput.setStyle("paddingRight", padding);

                padding = getStyle("paddingBottom");
                if (textInput.getStyle("paddingBottom") != padding)
                    textInput.setStyle("paddingBottom", padding);
                paddingChanged = false;
            }

            if (cornerRadiusChanged)
            {
                cornerRadiusChanged = false;
            }
        }

        override public function styleChanged(styleProp:String):void
        {
            var allStyles:Boolean = !styleProp || styleProp == "styleName";

            super.styleChanged(styleProp);

            if (allStyles || styleProp.indexOf("padding") == 0)
            {
                paddingChanged = true;
                invalidateProperties();
            }
            if (allStyles || styleProp == "cornerRadius")
            {
                cornerRadiusChanged = true;
                invalidateProperties();
            }                
        }


        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            if (getStyle("borderVisible") == false)
            {
                if (border)
                    border.visible = false;
                if (background)
                {
                    background.left = background.top = background.right = background.bottom = 0;
                }
                if (scroller)
                    scroller.minViewportInset = 0;
            }
            else
            {
                if (border)
                    border.visible = true;
                if (background)
                {
                    background.left = background.top = background.right = background.bottom = 1;
                }
                if (scroller)
                    scroller.minViewportInset = 1;
            }

            if (dropShadow)
                dropShadow.visible = getStyle("dropShadowVisible");



            if (borderStroke)
            {
                borderStroke.color = getStyle("borderColor");
                borderStroke.alpha = getStyle("borderAlpha");
            }
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }
    ]]>
</fx:Script>

<s:states>
    <s:State name="normal" />
    <s:State name="open" />
    <s:State name="disabled" />
</s:states>


<s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
               left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
               popUpPosition="below" popUpWidthMatchesAnchorWidth="false">


    <s:Group id="dropDown" maxHeight="112" minHeight="22" minWidth="{this.width}">


        <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7" 
                                 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>


        <s:Rect id="border" left="0" right="0" top="0" bottom="0">
            <s:stroke>

                <s:SolidColorStroke id="borderStroke" weight="1"/>
            </s:stroke>
        </s:Rect>


        <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
            <s:fill>

                <s:SolidColor id="bgFill" color="0xFFFFFF" />
            </s:fill>
        </s:Rect>


        <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">

            <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                <s:layout>
                    <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/>
                </s:layout>
            </s:DataGroup> 
        </s:Scroller>
    </s:Group>
</s:PopUpAnchor>


<s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
          skinClass="spark.skins.spark.ComboBoxButtonSkin" tabEnabled="false" />  

<s:TextInput id="textInput" enabled.disabled="false"
             left="0" right="18" top="0" bottom="0" 
             skinClass="spark.skins.spark.ComboBoxTextInputSkin"/> 

Answer 1

Whenever dataprovider changes on combobox text input change,has to use this code, to set position of dropdown in combobox.

LayoutManager.getInstance().validateNow();

(this.skin as ComboBoxSkin).popUp.updatePopUpTransform();