Question

I’m having a strange problem with the scrolling behavior of a TextArea in Flex 4.1. Consider the following code to show ¶ in the line endings of the TextArea content:

    [Bindable]
    public var text:String;

    public var applied:Boolean = false;

    protected function apply(event:MouseEvent):void
    {
        if (!applied)
        {   
            text = text.replace(/\n/g,"¶\n");
            applied = true;
        }
        else
        {
            text = text.replace(/¶\n/g, "\n");
            applied = false;
        }
    }
...
<s:VGroup>      
    <s:TextArea height="200" width="200" text="@{text}"/>
    <s:Button enabled="true" label="go!" click="apply(event)"/>
</s:VGroup>

When I press the button for the first time the pilcrows are added to the text. I except to see a move of few lines due to word wrapping, but the TextArea makes a too big “jump” to a very distant location in the text. Seems that this is a problem in the component – sometimes the jump is event to the beginning of the contained text. If I subsequently add or remove the pilcrows with the button, the scrolling seems to be OK.

Do you have any ideas how can I do regular expression replaces of the text of TextArea without experiencing such strange jumps around the content?
Thanks in advance!

Answer 1

I tested the code you provided and didn’t notice any strange “jumps” in the scroll position of the TextArea.

However, if you need to manually change the scroll position to remain at a certain point (e.g. the top of the TextArea), you could always update the scroll position property of your text area after applying the pilcrows:

protected function apply(event:MouseEvent):void
    {
        if (!applied)
        {   
            text = text.replace(/\n/g,"¶\n");
            applied = true;
            textArea.scroller.verticalScrollBar.value = 0; //Set to the desired scroll position
        }
        else
        {
            text = text.replace(/¶\n/g, "\n");
            applied = false;
            textArea.scroller.verticalScrollBar.value = 0;
        }
    }

...
<s:VGroup>      
    <s:TextArea id="textArea" height="200" width="200" text="@{text}"/>
    <s:Button enabled="true" label="go!" click="apply(event)"/>
</s:VGroup>