AS3 DataGrid NumericStepper ItemEditor

My overall objective is to use the NumericStepper component in a Datagrid column. I would prefer that you don’t have to “click to edit” such that the first click on the up arrow would increase the value by 1. You’d think Adobe would make this work natively but I’ve spent over 30 hours trying to find an AS3 solution. So far the following code works to use a NumericStepper as a cellRenderer but not an itemEditor. Perhaps if there is a way to check when the NumericStepper as a cellrenderer changes so I can create a function that updates the datagrid outside of using an itemeditor. As a renderer, the functionality is as I’d like where you see the numericstepper by default and the first click on it can increase the value by 1. But it doesn’t actually update the datagrid.

main timeline:

 
shop_dg.columns[4].cellRenderer = NumericStepperCellRenderer;

NumericStepperCellRenderer.as:

 
package 
{ 
    import fl.controls.NumericStepper; 
    import fl.controls.listClasses.ICellRenderer; 
    import fl.controls.listClasses.ListData; 
    public class NumericStepperCellRenderer extends NumericStepper implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        private var _selected:Boolean;
        private var _mouseState:String;
        public function NumericStepperCellRenderer() { 
        } 
        public function set data(d:Object):void { 
            _data = d; 
 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            text = _listData.value.toString();
      _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
        public function get selected():Boolean { 
            return _selected; 
        } 
 
      public function set selected(s:Boolean):void { 
            _selected = s;
        } 
        public function getMouseState():String { 
            return _mouseState; 
        } 
      public function setMouseState(ms:String):void { 
            _mouseState = ms;
        } 
 
  } 
}
 

When I set NumericStepperCellRenderer to be the item editor, it shows up as plain text on load and then switches to the numericstepper when you click to edit the cell.

 
shop_dg.editable = true;
shop_dg.columns[4].editable = true;
shop_dg.columns[4].itemEditor = NumericStepperCellRenderer;

It works ok until you finish editing when it throws this error.

ReferenceError: Error #1069: Property text not found on NumericStepperCellRenderer and there is no default value.
at fl.controls::DataGrid/itemEditorItemEditEndHandler()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at fl.controls::DataGrid/endEdit()
at fl.controls::DataGrid/editorMouseDownHandler()

So I need to add additional properties or functions on my NumericStepperCellRenderer to make it an item editor, but nowhere can I find what functions an itemrenderer needs or how to make it pass the right data to a customrenderer of the same type.