Flex 4 text rendering in s:RichEditableText component

I'm curious to see if anyone can shed some light on some strange text rendering behavior in the Spark RichEditableText component.

<?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"

creationComplete="handleApplicationCreationComplete()"
>
<fx:Script>
    <![CDATA[
        import flashx.textLayout.conversion.TextConverter;

        private static const DATA:Array =
        [
            "First sentence. This is a test of text rendering. How's it look?",
            "Let's see if this actually works correctly.",
            "Add some variety with the <b>bold</b> tag...",
            "Throw in a <a href='http://www.example.com'>link</a> as well!",
            "Well?! Does it work as expected? I think not..."
        ];

        private var currentIdx:int;

        protected function handleNextClick():void
        {
            currentIdx++;
            if(currentIdx >= DATA.length)
                currentIdx = 0;
            display(currentIdx);
        }

        protected function handleApplicationCreationComplete():void
        {
            currentIdx = 0;
            display(currentIdx);
        }

        private function display(idx:int):void
        {
            contentDisplay.textFlow = TextConverter.importToFlow(DATA[idx], TextConverter.TEXT_FIELD_HTML_FORMAT);
        }
    ]]>
</fx:Script>

<s:layout>
    <s:VerticalLayout />
</s:layout>

<s:VGroup width="100">
    <s:RichEditableText id="contentDisplay"
        width="100%"
        enabled="false" mouseEnabled="false"
        editable="false" focusEnabled="false"
    />
</s:VGroup>
<s:Button label="Next" click=开发者_开发百科"handleNextClick()" />
</s:Application>

The above application simply navigates through the five sentences in the DATA array (every time the Next button is pressed). For whatever reason, RichEditableText component doesn't completely reset its view (by clearing the previous text) before setting new content. From what I can gather, this faulty rendering is somehow based on the combination of line count and relative width. I also discovered that if I set the width property of the RichEditableText component to an absolute value (say, 100) as opposed to relative (percentage, 100%) the text is rendered correctly.

As far as I can see, this behavior is unintended and is, in fact, a bug.

there's no solution, it's a bug in the framework...

This is a bug in the 4.1 SDK. To work around this issue you can clear the RTE and then update it on the subsiquent frame.

callLater(function workAround(richEditableText:RichEditableText, updateText:String):void
{
    richEditableText.text = updateText;
}
, [ myRichEditableTextComponent, myNewMessageText ]);

Just place this code where you were previously updating the RET and pass through the component and the new text. This should work the same if you are using a text flow, just replace text and the text string with the flow.