Tab not working properly for Datagrid ItemEditor ComboBox

Question

When you run the app type a1 in the find an App combo box then hit the tab key.
Click in the 3rd row in the As Bs column and a combobox will show.
Type a3 and then hit enter.  Notice that A3 is saved as the selected item and saved to the dataprovider
Hit the backspace key and hit enter.  Notice that the  null is saved and nothing is selected.
Type a3 again and hit enter.
Hit the backspce again but this time hit the tab key.  Notice the previous value is back.  ooops.
{Code}
<?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"
               xmlns:vo="valueObjects.*"
               width="100%" height="100%">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            protected function aCBLabel(item:Object):String
                if (item != null)
                    return item.name;
                else
                    return "";
            protected function bDG_creationCompleteHandler(event:FlexEvent):void
                bDG.selectedIndex = 0;
            protected function bAFormat(item:Object, column:DataGridColumn):String
                if (item [column.dataField] != null)
                    return item [column.dataField].name;
                else
                    return "";
        ]]>
    </fx:Script>
    <fx:Declarations>
        <vo:ADto id="aDto"/>
        <vo:BDto id="bDto"/>
        <s:ArrayCollection id="aList">
            <vo:ADto>
                <vo:id>1</vo:id>
                <vo:name>a1</vo:name>
                <vo:bs>
                    <vo:BDto>
                        <vo:id>1</vo:id>
                        <vo:aDto>
                            <vo:ADto>
                                <vo:id>1</vo:id>
                                <vo:name>a1</vo:name>
                            </vo:ADto>
                        </vo:aDto>
                    </vo:BDto>
                    <vo:BDto>
                        <vo:id>2</vo:id>
                        <vo:aDto>
                            <vo:ADto>
                                <vo:id>2</vo:id>
                                <vo:name>a2</vo:name>
                            </vo:ADto>
                        </vo:aDto>
                    </vo:BDto>
                    <vo:BDto>
                        <vo:id>0</vo:id>
                    </vo:BDto>
                </vo:bs>
            </vo:ADto>
            <vo:ADto>
                <vo:id>2</vo:id>
                <vo:name>a2</vo:name>
                <vo:bs>
                    <vo:BDto>
                        <vo:id>3</vo:id>
                        <vo:aDto>
                            <vo:ADto>
                                <vo:id>3</vo:id>
                                <vo:name>a3</vo:name>
                            </vo:ADto>
                        </vo:aDto>
                    </vo:BDto>
                    <vo:BDto>
                        <vo:id>0</vo:id>
                    </vo:BDto>
                </vo:bs>
            </vo:ADto>
        </s:ArrayCollection>
        <s:ArrayCollection id="bAList">
            <vo:ADto>
                <vo:id>1</vo:id>
                <vo:name>a1</vo:name>
            </vo:ADto>
            <vo:ADto>
                <vo:id>2</vo:id>
                <vo:name>a2</vo:name>
            </vo:ADto>
            <vo:ADto>
                <vo:id>3</vo:id>
                <vo:name>a3</vo:name>
            </vo:ADto>
        </s:ArrayCollection>
    </fx:Declarations>
    <fx:Binding source="aCB.selectedItem as ADto" destination="aDto"/>
    <s:Form id="AForm" width="700" height="170">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
        <s:HGroup x="0" y="50" width="670" height="60">
            <s:Label height="25" fontWeight="bold" text="Find an A" verticalAlign="middle"/>
            <s:ComboBox id='aCB'
                        prompt="Enter or Select an A Name"
                        labelFunction="aCBLabel"
                        x="110" y="10" width="375">
                <mx:ArrayCollection id="asList" list="{aList}"/>
            </s:ComboBox>
        </s:HGroup>
    </s:Form>
    <mx:DataGrid id="bDG" x="10" y="140" width="450" height="200"
                 editable="true"
                 dataProvider="{aDto.bs}"
                 creationComplete="bDG_creationCompleteHandler(event)">
        <mx:columns>
            <mx:DataGridColumn id="bidDC"
                               headerText="id"
                               editable="true"
                               dataField="id"
                               editorDataField="value"
                               width="50"/>
            <mx:DataGridColumn id="bNameDC"
                               headerText="As Bs"
                               editable="true"
                               dataField="aDto"
                               labelFunction="bAFormat"
                               editorDataField="value"
                               width="150">
                <mx:itemEditor>
                    <fx:Component>
                        <s:MXDataGridItemRenderer implements="mx.managers.IFocusManagerComponent">
                            <fx:Script>
                                <![CDATA[
                                    import mx.collections.ArrayCollection;
                                    import mx.controls.dataGridClasses.DataGridListData;
                                    import mx.controls.listClasses.BaseListData;
                                    import mx.events.FlexEvent;
                                    import spark.events.DropDownEvent;
                                    import spark.events.IndexChangeEvent;
                                    [Bindable]
                                    public var bAs:ArrayCollection;
                                    protected function cb_InitializeHandler(event:FlexEvent):void
                                        bAs = outerDocument.bAList;
                                        aDto = outerDocument.bDG.selectedItem.aDto;
                                        if (aDto != null)
                                            var t:ADto;
                                            for (var i:int = 0; i<bAs.length; i++)
                                                t = bAs[i];
                                                if (aDto.id == t.id)
                                                    cb.selectedIndex = i;
                                                    break;
                                    override public function setFocus():void
                                        cb.setFocus();
                                    public function get value():ADto
                                        if (cb.isDropDownOpen)
                                            cb.closeDropDown(true);
                                        cb.validateNow();
                                        aDto = cb.selectedItem as ADto;
                                        return aDto
                                    protected function cb_closeHandler(event:DropDownEvent):void
                                        aDto = cb.selectedItem as ADto;
                                ]]>
                            </fx:Script>
                            <fx:Declarations>
                                <vo:ADto id="aDto"/>
                                <!-- Place non-visual elements (e.g., services, value objects) here -->
                            </fx:Declarations>
                            <s:ComboBox id="cb"
                                            width = "100%"
                                            prompt="{aDto.name}"
                                            dataProvider="{bAs}"
                                            labelField="name"
                                            initialize="cb_InitializeHandler(event)"
                                            close="cb_closeHandler(event)">
                            </s:ComboBox>
                        </s:MXDataGridItemRenderer>
                    </fx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</s:Application>
{Code}
{Code}
package valueObjects
    import com.adobe.fiber.services.IFiberManagingService;
    import com.adobe.fiber.valueobjects.IValueObject;
    import mx.collections.ArrayCollection;
    import valueObjects.BDto;
    import com.adobe.fiber.core.model_internal;
    use namespace model_internal;
    public class ADto implements com.adobe.fiber.valueobjects.IValueObject
        private var _internal_id : int;
        private var _internal_name : String;
        private var _internal_bs : ArrayCollection;
        model_internal var _internal_bs_leaf:valueObjects.BDto;
        public function ADto()
        public function get id() : int
            return _internal_id;
        public function get name() : String
            return _internal_name;
        public function get bs() : ArrayCollection
            return _internal_bs;
        public function set id(value:int) : void
            var oldValue:int = _internal_id;
            if (oldValue !== value)
                _internal_id = value;
        public function set name(value:String) : void
            var oldValue:String = _internal_name;
            if (oldValue !== value)
                _internal_name = value;
        public function set bs(value:*) : void
            var oldValue:ArrayCollection = _internal_bs;
            if (oldValue !== value)
                if (value is ArrayCollection)
                    _internal_bs = value;
                else if (value is Array)
                    _internal_bs = new ArrayCollection(value);
                else if (value == null)
                    _internal_bs = null;
                else
                    throw new Error("value of bs must be a collection");
        private var _managingService:com.adobe.fiber.services.IFiberManagingService;
        public function set managingService(managingService:com.adobe.fiber.services.IFiberManagi ngService):void
            _managingService = managingService;
{Code}
{Code}
package valueObjects
import com.adobe.fiber.core.model_internal;
import com.adobe.fiber.services.IFiberManagingService;
import com.adobe.fiber.valueobjects.IValueObject;
import valueObjects.ADto;
import mx.collections.ArrayCollection;
use namespace model_internal;
public class BDto implements com.adobe.fiber.valueobjects.IValueObject
    private var _internal_id : int;
    private var _internal_aDto : ADto;
    private static var emptyArray:Array = new Array();
    public function BDto()
        _internal_id = 0;
    public function get id() : int
        return _internal_id;
    public function get aDto() : ADto
        return _internal_aDto;
    public function set id(value:int) : void
        var oldValue:int = _internal_id;
        if (oldValue !== value)
            _internal_id = value;
    public function set aDto(value:ADto) : void
        var oldValue:ADto = _internal_aDto;
        if (oldValue !== value)
            _internal_aDto = value;
    private var _managingService:com.adobe.fiber.services.IFiberManagingService;
    public function set managingService(managingService:com.adobe.fiber.services.IFiberManagi ngService):void
        _managingService = managingService;
{Code}

Answer 1

the reason the tab was not working is because it was not changing the selection and just exiting the combo box.  So, in the value function add if (cb.textInput.text == "") cb.selectedIndex = -1;  This will change the selection as desired and fixes the problem.