ItemRenderer shows through ItemEditor

On mx: datagrid I am using custom itemrenderer and itemeditor. When a cell is in edit mode, the Itemeditor separator is displayed inside the itemeditor.

So it's not pretty and it's hard to read what you write.

In itemEditor I am trying to use contentBackgroundColor and override updateDisplayList

See below code for itemEditor

    <?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          focusEnabled="true"

                          creationComplete="mxdatagriditemrenderer1_creationCompleteHandler(event)"
                          focusIn="mxdatagriditemrenderer1_focusInHandler(event)">

    <fx:Script>
        <![CDATA[
            import fr.util.UtilString;

            import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.controls.listClasses.BaseListData;
            import mx.core.FlexGlobals;
            import mx.core.UITextField;
            import mx.events.FlexEvent;
            public var htmlModif:String;
            public var beginIndex:int;
            public var endIndex:int;

            protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                graphics.beginFill(0xFFFFFF); // white
                graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
                graphics.endFill();

                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }

            override public function validateProperties():void
            {
                super.validateProperties();
                if (listData)
                {
                    var dg:DataGrid = DataGrid(listData.owner);

                    var column:DataGridColumn = dg.columns[listData.columnIndex];

                    var htmlText:UITextField = lblData.htmlText as UITextField;

                }


            }

            protected function lblData_focusOutHandler(event:FocusEvent):void
            {
                beginIndex = lblData.selectionBeginIndex;
                endIndex= lblData.selectionEndIndex;
            }

            protected function mxdatagriditemrenderer1_focusInHandler(event:FocusEvent):void
            {
                lblData.editable=true;
            }

            protected function mxdatagriditemrenderer1_creationCompleteHandler(event:FlexEvent):void
            {
                //set cursor postion to end
                lblData.selectionBeginIndex=lblData.htmlText.length;
                lblData.selectionEndIndex=lblData.htmlText.length+1;
                lblData.addEventListener(MouseEvent.CLICK,copyGloss_focusInHandler);

                lblData.setFocus();             
            }

            // ajout de terme venant du gloassaire
            protected function copyGloss_focusInHandler(event:Event):void
            {
                if(FlexGlobals.topLevelApplication.copyFromGloss){
                    if(Clipboard.generalClipboard.hasFormat(ClipboardFormats.TEXT_FORMAT)){ 


                        var textCpb:String = Clipboard.generalClipboard.getData(ClipboardFormats.TEXT_FORMAT) as String; 


                        var ind:int = new UtilString().calculateHtmlPosition(lblData.htmlText, lblData.selectionBeginIndex);
                        lblData.htmlText = lblData.htmlText.substring(0, ind) + textCpb + " "+lblData.htmlText.substring(ind, lblData.htmlText.length);     
                    }
                    htmlModif=lblData.htmlText;                    
                    Clipboard.generalClipboard.clear(); 
                    FlexGlobals.topLevelApplication.copyFromGloss=false;
                }
            }


        ]]>
    </fx:Script>

    <mx:TextArea id="lblData" top="0" left="0" right="0" bottom="0" 
                 htmlText="{dataGridListData.label}" 
                 wordWrap="true"
                 editable="true"
                 contentBackgroundColor="0xFFFFFF"
                 horizontalScrollPolicy="off"
                 creationComplete="htmlModif=lblData.htmlText"
                 change="htmlModif=lblData.htmlText"
                 focusOut="lblData_focusOutHandler(event)"/>
</s:MXDataGridItemRenderer>

      

        
        
        
      

    

Datagrid creation

<mx:DataGrid id="dgSuiviClini"
verticalGridLines="true"
horizontalGridLines="true"
horizontalScrollPolicy="on"
variableRowHeight="true"
dataProvider="{DP_LISTEREDVCLI}"
editable="true"
focusEnabled="true"
dropEnabled="true"
itemEditBegin="dgSuiviClini_itemEditBeginHandler(event)"
itemEditEnd="getCellInfo(event);"
itemFocusOut="getCellInfo(event)"
 width="100%" height="100%"
rowHeight="20">
<mx:columns>

<mx:DataGridColumn dataField="scRub2" headerText="{sNomCol2}" editable="true" 
width="{iNomCol2}"
id="dgc1" wordWrap="true" visible ="{bcol2Visible}"
itemRenderer="fr.ui.itemRenderer.MultilineHTMLRenderer"
itemEditor="fr.ui.itemRenderer.irCliHtmlEditor"
editorDataField="htmlModif"
editorUsesEnterKey="true" />
 </mx:columns>
</mx:DataGrid>

      

        
        
        
      

    

But in such cases, the result is:

I am very glad if you could help me.

thank