Multiple text areas with different rotation values causes borders to be very very wrong

Question

If you have two textareas, one has a rotation value besides 0 and the other has no rotation value or a value of 0 and you 'tab' focus from the one w/rotation to the one w/out. The border around the textArea w/out rotation will be rotated. If you set the rotation value of the non-rotated text field to a non-zero number, even 0.01, it fixes the problem, this causes tons of other problems in text rendering though so its not a solution.

I found setting the focusThickness style to 0 removes the border, which is a good solution but not a great one, anybody got a better one? Here is some sample code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:VBox width="100%" height="100%">
 <mx:TextArea id="source" width="100%" fontWeight="bold" fontSize="20" height="50" rotation="5" />
 <mx:TextArea id="dest" width="100%" height="50" />
</mx:VBox>

Here is what it looks like:

Answer 1

Here is a class that extends TextArea and overrides the adjustFocusRect method to fix this bug.

package
{
    import flash.display.DisplayObject;
    import flash.geom.Point;

    import mx.controls.TextArea;
    import mx.core.IFlexDisplayObject;
    import mx.core.IInvalidating;
    import mx.core.IProgrammaticSkin;
    import mx.core.mx_internal;
    import mx.managers.IFocusManager;
    import mx.styles.IStyleClient;

    use namespace mx_internal;

    public class TextArea2 extends TextArea
    {
     override protected function adjustFocusRect(obj:DisplayObject = null):void
     {
      super.adjustFocusRect(obj);

      var focusObj:IFlexDisplayObject = IFlexDisplayObject(getFocusObject());
      if (focusObj)
      {
       if ( !rotation ) {
        DisplayObject(focusObj).rotation = 0;
       }
      }
     }
    }
}