Question

Below is a self-contained application you can run. It simply displays a spark combo box with a reset button. If you select an entry, such as “Red”, then click on the “Reset Combo Box” button, the selected entry in the combo box is cleared. However, it should also remove any error message for the combo box, but this error message is not getting removed. A second click of the Reset button will remove the error.

Anyone know a solution that doesn’t require a second click on the Reset button?

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
    <mx:NumberValidator id="valCB" source="{myCB}" 
                        property="selectedIndex" minValue="0" 
                        lowerThanMinError="This field is required."/>
</fx:Declarations>

<fx:Script>
    <![CDATA[   
        import mx.events.ValidationResultEvent;
        import mx.validators.*;

        private function resetCB():void {
            valCB.enabled=false;   <!-- disable validator -->
            myCB.selectedIndex=-1; <!-- reset selected entry -->
            valCB.enabled=true;    <!-- enable validator -->
            myCB.errorString="";   <!-- clear error msg -->
        }   
    ]]>
</fx:Script>

<s:Form id="myForm">                
    <s:layout>
        <s:FormLayout gap="-5"/>
    </s:layout>
    <s:FormItem label="Select a Color"  required="true">
        <s:ComboBox id="myCB" width="140" prompt="Select a Color"> 
            <s:dataProvider>
                <mx:ArrayList>
                    <fx:String>Red</fx:String>
                    <fx:String>Blue</fx:String>
                    <fx:String>Green</fx:String>
                </mx:ArrayList>
            </s:dataProvider>
        </s:ComboBox>
    </s:FormItem>
</s:Form>
<s:Button label="Reset Combo Box" x="60" y="60" click="resetCB()"/>
</s:Application>

Answer 1

This seems like a bug on Adobe’s part to me, though I’m not sure if the intended behaviour would be for it to work on the first click, or to not work at all. You’re setting the selectedIndex to a value not allowed by your validator, turning the validator on and expecting it not to validate. I’m not sure what I would expect to happen.

It might be better to just disable the validator in the click event, and re-enable it in a change event. Remove valCB.enabled=true; from the reset function (and myCB.value = -1;, since the value will already be -1):

private function resetCB():void {
    valCB.enabled=false;   <!-- disable validator -->
    myCB.errorString="";   <!-- clear error msg -->
} 

and give the ComboBox a change event:

<s:ComboBox id="myCB" width="140" prompt="Select a Color" change="enableValidate()">

And then enable the validator in that event:

protected function enableValidate():void
{
    valCB.enabled=true;
}