TextArea being used as an itemEditor misbehaves when the enter key is pressed

I have a TextArea inside an itemEditor component, the problem is that when typing in the TextArea if the enter key is pressed the itemEditor resets itself rather moving the caret to the next line as expected:

  <mx:List width="100%" editable="true" >

    <mx:dataProvider>
      <mx:ArrayCollection>
        <mx:Array>
          <mx:Object title="Stairway to Heaven" />
        </mx:Array>
      </mx:ArrayCollection>
    </mx:开发者_运维技巧dataProvider>

    <mx:itemRenderer>
      <mx:Component>
        <mx:Text height="100" text="{data.title}"/>
      </mx:Component>                       
    </mx:itemRenderer>

    <mx:itemEditor>
      <mx:Component>
        <mx:TextArea height="100" text="{data.title}"/>
      </mx:Component>                       
    </mx:itemEditor>

  </mx:List>

</mx:Application>

Could anyone advise how I can get around this strange behaviour and make the enter key behave as expected?

Thanks,

Chris

The trick is to listen for the ITEM_EDIT_END event and prevent the default list behaviour if the reason is NEW_ROW. See example below:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="onComplete();">
    <mx:Script><![CDATA[
        import mx.events.ListEvent;
        import mx.events.ListEventReason;
        import mx.controls.TextArea;

        private function onComplete():void
        {
            list.addEventListener(ListEvent.ITEM_EDIT_END, onEndEdit);
        }
        private function onEndEdit(e:ListEvent):void
        {
            if (e.reason == ListEventReason.NEW_ROW)
                e.preventDefault();
            else
                list.editedItemRenderer.data.title = TextArea(e.currentTarget.itemEditorInstance).text;
        }
    ]]></mx:Script>
    <mx:List width="100%" editable="true" id="list">

        <mx:dataProvider>
            <mx:Object title="Stairway to Heaven" />
        </mx:dataProvider>

        <mx:itemRenderer>
            <mx:Component>
                <mx:Text height="100" text="{data.title}"/>
            </mx:Component>                       
        </mx:itemRenderer>

        <mx:itemEditor>
            <mx:Component>
                <mx:TextArea height="100" text="{data.title}"/>
            </mx:Component>                       
        </mx:itemEditor>

    </mx:List>

</mx:Application>

Looks like the keypress of [enter] is being handled by your lists default function rather than your item renderers. Not sure what the exact code to fix that is, but I would think you would need to extend the list control that would nix the function when the user presses [enter]

Think you can use the "editorUsesEnterKey" of List.as (line 544 Flex3.5)

A flag that indicates whether the item editor uses Enter key.