Question

EDITED for more info:

I have a Flex 4 app with an external ItemRenderer inside of a DataGroup for a repeating form. The DataGroup dataprovider is an ArrayCollection (coll_sites).

In the documentParent I have a trio of comboBoxes (Status, Year, Area) that trigger a filter function that operates directly on coll_sites.

The itemRenderer has a series of textInputs and comboBoxes. Three of these comboBoxes are tied to fields in coll_sites (again, Status, Year and Area) that are filtered by the aforementioned parentDocument comboBoxes.

The problem I am having is that in the itemRenderer when the field is one of the filtered ones, the itemRenderer ComboBox will not close. If it’s not filtered, there is no problem. I have confirmed that the problem ComboBox updates the ArrayCollection appropriately, it just won’t close unless another Item in the dropdown is selected.

Abbreviated Code:

Filter ComboBox (parentDocument):

<s:DropDownList id="cbo_filter_Year" x="156" y="36" dataProvider="{coll_YearList}" labelField="YEAR" prompt="Year" change="filter()"/>;

Filter function:

private functionfilter():void {
    coll_sites.filterFunction = filterSitesCollection;
    coll_sites.refresh();
}
private function filterSitesCollection(item:Object):Boolean{
    //I filter the Sites based on the selected combobox
    var isMatch:Boolean = true;
    if (cbo_filter_Year.selectedIndex != -1){ 
        //if we have a year selected 
        if (item.YEAR.toString() != cbo_filter_Year.selectedItem.YEAR.toString()){
        isMatch = false;
        }
    }
 return isMatch;
}

Call to ItemRenderer in parentDocument:

<s:DataGroup itemRenderer="site_renderer" dataProvider="{coll_sites}" x="10" y="100">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
</s:DataGroup>

ItemRenderer:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="true">
    <s:BorderContainer x="0" y="0" width="653" height="215" borderWeight="2">
        <s:Label text="Site ID" x="0" y="10"/>
        <s:Label text="{data.SITE_ID}" x="0" y="25"/>
        <s:Label text="Year" x="150" y="10"/>
        <s:ComboBox id="cbo_Year" x="150" y="25" dataProvider="{parentDocument.coll_ShortYearList}" labelField="YEAR" selectedItem="{data.YEAR}"  change="data.YEAR=cbo_Year.selectedItem.YEAR"/>
        <s:Label text="Status" x="300" y="10"/>
        <s:ComboBox id="cbo_Status" x="300" y="25" dataProvider="{parentDocument.coll_SiteStatus}" labelField="STATUS" selectedItem="{data.STATUS}" change="data.STATUS=cbo_Status.selectedItem.STATUS;"/>
    </s:BorderContainer>
</s:ItemRenderer>

In the ItemRenderer code above, the ComboBox for STATUS works exactly as it should but YEAR stays open after changing. In my full code, I have three such filtered fields and all three behave exactly the same. The other six fields which are not filtered, close appropriately.

I know this has to be something simple but I am at a loss. What am I missing?

Answer 1

I’m unclear what triggers the filtering; and if the ComboBox loses focus when this filtering occurs. If the ComboBox doesn’t lose focus, and nothing in the ComboBox is selected; or the down arrow isn’t click; then there is no action that will close the drop down.

You can force the ComboBox to close with the closeDropDown() method.