Custom component containing filterFunction problem when using multiple instances

I have a main app that is using two instances of a custom MXML DropDownList component.

I included all the logic and queries within the custom component to query MySQL and fill an ArrayCollection with the result.

In my first DropDownList, I want to show all the available currencies avilable in my database.

In the second DropDownList, I only want to show the CAD and USD currencies using a filterFunction.

I don't know why, but once the filterFunction is applied to the first element, the second act like they are sharing the same currenciesList variable (THIS IS MY PROBLEM).

[Bindable] for currenciesList is required to bind to my aSyncListView.

public for currenciesList is required in order to be used in the main app.

And no matter if my variable is public or private, I have the same bug... Please view the output at the end of this message.

---

The call in my main app look like :

<mx:Form>
  <formElems:DropDownListCurrencies id="product_cost_price_curr"
    currencyCadUsdOnly="true"/>
  <formElems:DropDownListCurrencies id="product_price_curr"/>
</mx:Form>

Now my custom component :

<fx:Script>
    <![CDATA[
        import classes.SharedFunctions;

        import mx.collections.ArrayCollection;
        import mx.controls.Alert;
        import mx.events.FlexEvent;
        import mx.rpc.events.ResultEvent;

        [Bindable]
        public var currenciesList:ArrayCollection;

        public var currencyCadUsdOnly:Boolean = false;

        protected function dropdownlist1_creationCompleteHandler(event:FlexEvent):void
        {
            getAllCurrenciesResult.token = currenciesService.getAllCurrencies();

            // DEBUG just to show the id of the component
            trace('id:' + this.id + ' (getAllCurrencies)');
        }

        protected function getAllCurrenciesResult_resultHandler(event:ResultEvent):void
        {
            currenciesList = getAllCurrenciesResult.lastResult;

            // DEBUG before filterFunction
            trace('id:' + this.id + ', currencyCadUsdOnly:' + currencyCadUsdOnly + ', currenciesList.length:' + currenciesList.length + ' (BEFORE filterFunction)');

            if (currencyCadUsdOnly == true) {
                currenciesList.filterFunction = filterCadUsdOnly;
                currenciesList.refresh();
            }

            // DEBUG after filterFunction
            trace('id:' + this.id + ', currencyCadUsdOnly:' + currencyCadUsdOnly + ', currenciesList.length:' + currenciesList.length + ' (AFTER filterFunction)');
        }

        protected function filterCadUsdOnly(obj:Object):Boolean
        {
            return (obj.code == 'CAD' || obj.code == 'USD');
        }

    ]]>
</fx:Script>

<fx:Declarations>
    <s:CallResponder id="getAllCurrenciesResult" result="getAllCurrenciesResult_resultHandler(event)"/>
    <currenciesservice:CurrenciesService id="currenciesService" fault="SharedFunctions.showError(event.fault.faultString, event.fault.faultDetail)" showBusyCursor="true"/>
</fx:Declarations>

<s:AsyncListView list="{currenciesList}"/>

Finally let's have a look at the console output. I'm expecting the ArrayList to have a length of 7 on creation of the second component... :

id:product_prices_curr (getAllCurrencies)
id:product_cost_price_curr (getAllCurrencies)
id:product_prices_curr, currencyCadUsdOnly:true, currenciesList.length:7 (BEFORE filterFunction)
id:product_prices_curr, currencyCadUsdOnly:true, currenciesList.length:2 (AFTER filterFunction)
id:product_cost_price_curr, currencyCadUsdOnly:false, currenciesList.length:2 (BEFORE filterFunction)
id:product_cost_price_curr, currencyCadUsdOnly:false, currenciesList.length:2 (AFTER filterFunction)

THANKS FOR THE HELP!

Whenever you need to have the same list in multiple places with differing filters, what you need is a ListCollectionView. That way you can apply a filter to it and you won't affect the original list. It's as easy as:

var secondList:ListCollectionView = new ListCollectionView(originalList);

And your secondList can have any filter you like without affecting the original list, with the added benefit of updating when items are added or removed from the originalList.

See here: mx.collections.ListCollectionView