Apache – Flex: Combobox loses is focus when data-provider updated

apache-flex

It seems that ComboBoxes loose their selected item after their dataProvider updates, even if the same selected item is still in the dataProvider. They convert back to the first item being selected. Is there anyway to prevent this? So that if the same object is in the dataProvider it keeps the same object selected and only reverts back to the first index if the selected object is not in the updated dataProvider?

Thanks!

Best Answer

If the ComboBox looses its selected item, it means the dataProvider isn't updated - it is replaced. If you bind a ComboBox to an ArrayCollection and then add an item to the AC, The ComboBox is updated without loosing its selectedItem.

Sometimes you have to replace the dataProvider and in those cases, you have to listen for the updateComplete-event and reset the selectedItem. You can try this code:

<mx:Script>
    <![CDATA[
        import mx.controls.ComboBox;
        import mx.events.ListEvent;
        import mx.events.FlexEvent;
        import mx.collections.ArrayCollection;

        [Bindable]
        private var dp:ArrayCollection = new ArrayCollection(["Item 1", "Item 2", "Item 3"]);

        private var selectedItem:*;
        private var dataProvider:*;

        private function onChange(event:ListEvent):void {
            selectedItem = (event.currentTarget as ComboBox).selectedItem;
        }
        private function onUpdateComplete(event:FlexEvent):void {
            trace(event);
            var cb:ComboBox = event.currentTarget as ComboBox;
            if(dataProvider == null || cb.dataProvider != dataProvider) {
                if(selectedItem != null && cb.selectedItem != selectedItem) cb.selectedItem = selectedItem;
                if(cb.selectedIndex < 0) cb.selectedIndex = 0;
                dataProvider = cb.dataProvider;
            }
        }

        private function extendDP():void {
            dp.addItem("Item " + (dp.length +1));
            var ac:ArrayCollection = new ArrayCollection(dp.source);
            dp = ac;
        }

        private function reduceDP():void {
            dp.removeItemAt(dp.length -1);
            var ac:ArrayCollection = new ArrayCollection(dp.source);
            dp = ac;
        }
    ]]>
</mx:Script>

<mx:VBox>
    <mx:ComboBox dataProvider="{dp}" change="onChange(event)" updateComplete="onUpdateComplete(event)" />
    <mx:Button label="Extend dp" click="extendDP()" />
    <mx:Button label="Reduce dp" click="reduceDP()" />
</mx:VBox>

It creates a ComboBox and binds it to an ArrayCollection. The two buttons adds and removes items from the collection.

Related Solutions

Null in Flex ComboBox

It seems that the only way to correctly manage an empty item is to actually add an item to the dataprovider of the combobox. The following subclass will handle this automatically.

The implementation is a little tricky in order to support changes on dataprovider, in terms of items add/remove and of complete reassignment of the dataprovider itself (just think about arraycollections bindings to remote services' response).

package {



    import flash.events.Event;
    import flash.events.FocusEvent;
    import mx.collections.ArrayCollection;
    import mx.collections.ICollectionView;
    import mx.collections.IList;
    import mx.containers.FormItem;
    import mx.controls.ComboBox;
    import mx.events.CollectionEvent;
    import mx.events.ListEvent;
    import mx.validators.Validator;

    public class EmptyItemComboBox extends ComboBox {

        protected var _emptyItem:Object = null;
        protected var _originalDataProvider:ICollectionView = null;

        public function EmptyItemComboBox() {
            super();
            addEmptyItem();
            addEventListener(Event.CHANGE, onChange);
        }

        private function onChange(event:Event):void {
            dispatchEvent(new Event("isEmptySelectedChanged"));
        }

        [Bindable]
        public function get emptyItem():Object {
            return _emptyItem;
        }

        public function set emptyItem(value:Object):void {
            if (_emptyItem != value) {
                clearEmptyItem();
                _emptyItem = value;
                addEmptyItem();
            }
        }

        [Bindable(event="isEmptySelectedChanged")]
        public function get isEmptySelected():Boolean {
                return (selectedItem == null || (_emptyItem != null && selectedItem == _emptyItem));
        }

        override public function set selectedItem(value:Object):void {
            if (value == null && emptyItem != null) {
                super.selectedItem = emptyItem;
            } else    if (value != selectedItem) {
                super.selectedItem = value;
            }
            dispatchEvent(new Event("isEmptySelectedChanged"));
        }

        override public function set dataProvider(value:Object):void {
            if (_originalDataProvider != null) {
                _originalDataProvider.removeEventListener(
                        CollectionEvent.COLLECTION_CHANGE,
                        onOriginalCollectionChange);
            }
            super.dataProvider = value;
            _originalDataProvider = (dataProvider as ICollectionView);
            _originalDataProvider.addEventListener(
                    CollectionEvent.COLLECTION_CHANGE,
                    onOriginalCollectionChange)
            addEmptyItem();
        }

        private function clearEmptyItem():void {
            if (emptyItem != null && dataProvider != null 
                    && dataProvider is IList) {
                var dp:IList = dataProvider as IList;
                var idx:int = dp.getItemIndex(_emptyItem);
                if (idx >=0) {
                    dp.removeItemAt(idx);    
                }
            }
            dispatchEvent(new Event("isEmptySelectedChanged"));
        }

        private function addEmptyItem():void {
            if (emptyItem != null) {
                 if (dataProvider != null && dataProvider is IList) {
                    var dp:IList = dataProvider as IList;
                    var idx:int = dp.getItemIndex(_emptyItem);
                    if (idx == -1) {
                        var newDp:ArrayCollection = new ArrayCollection(dp.toArray().concat());
                        newDp.addItemAt(_emptyItem, 0);
                        super.dataProvider = newDp;
                    }
                }
            }
            dispatchEvent(new Event("isEmptySelectedChanged"));
        }

        private function onOriginalCollectionChange(event:CollectionEvent):void {
            if (_emptyItem != null) {
                dataProvider = _originalDataProvider;
                addEmptyItem();
            }
        }
    }
}

Some notes about the class:

It will insert the empty object automatically on the list.. this was a strong requirements for my scenario: the dataproviders was returned by remote services and they couldn't include additional elements just to support the Flex UI, neither I could manually watch every collection to create empty items on each collection refresh.
Since it has to work with the contents of the collection, it will internally create a copy of the original one with the same items' instances AND the empty one, so the instance of the original collection will not be touched at all and can be reused in other context.
It will listen for changes on the original dataprovider, allowing to work on it and even to assign a competely new one: the empty item will be recreated automatically.
You are in control providing the actual instance to use as the "empty item" with the emptyItem attribute: this allows to keep a consistent data type with the rest of the collection (if you use typed objects), or to define a custom label on it.

Some example code using it...



    <mx:Script>
    <![CDATA[
        import mx.controls.Alert;
    ]]>
    </mx:Script>

    <mx:ArrayCollection id="myDP">
    <mx:source>
        <mx:Array>
            <mx:Object value="1" label="First"/>  
            <mx:Object value="2" label="Second"/>
            <mx:Object value="3" label="Third"/>
        </mx:Array>
    </mx:source>
    </mx:ArrayCollection>

    <local:EmptyItemComboBox id="comboBox" dataProvider="{myDP}" labelField="label">
    <local:emptyItem>
        <mx:Object value="{null}" label="(select an item)"/>  
    </local:emptyItem>
    </local:EmptyItemComboBox>

    <mx:Button label="Show selected item" click="Alert.show(comboBox.selectedItem.value)"/>

    <mx:Button label="Clear DP" click="myDP.removeAll()"/>
    <mx:Button label="Add item to DP" click="myDP.addItem({value: '4', label: 'Fourth'})"/>
    <mx:Button label="Reset DP" click="myDP = new ArrayCollection([{value: '1', label: 'First'}])"/>

    <mx:Label text="{'comboBox.isEmptySelected = ' + comboBox.isEmptySelected}"/>

</mx:Application>

Flex Spark DropDownList selectedItem didn’t update after dataProvider changed

Perhaps you are right in assuming it is broken.. I won't judge on that. The fix for your problem is pretty simple though, change the flip function to reset selected index, thereby triggering data-change on the list, and eventually binding on your components:

public function flipLast():void {
          list.selectedIndex = -1;
          if( last ) {
               list.dataProvider = dp1;
               list.selectedItem = "Flex";
          } else {
               list.dataProvider = dp2;
               list.selectedItem = "Catalyst";        
          }
          last = !last;
     }

Best Answer

Related Solutions

Null in Flex ComboBox

Flex Spark DropDownList selectedItem didn’t update after dataProvider changed

Related Topic