Adobe AIR TextField bug when resetting HTML text.

I ran into a really strange issue that only occurs within Adobe AIR applications (AIR 1.5.1/1.5.2). When I create a TextField control, set it’s style, and then assign it HTML text it appears fine. However, if I wish to reset that TextField content and the original content has links, the entire replaced content becomes one HTML link. I think the issue can be better explained with some images and some code samples.

Issue Context

The first image is a TextField with one HTML link. The link fires a TextEvent which is handled by a function which replaces the text. The original TextField out put is in the image below withe the “more” HTML link at the end:

The second image shows the result when the “more” link is clicked and the text is replaced. You can see that when the mouse is over the text the entire text becomes a “more” link even though the new content has no HTML links. The rollover style on the TextField underlines the text.

Below is the complete AIR application code that shows how I setup the application and changed the TextField content.

Code


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import flash.net.navigateToURL;

private var textMessage:TextField;
private var longtext:String = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum lorem in dolor facilisis aliquam dictum libero aliquet. Pellentesque scelerisque eleifend nunc nec consectetur. Pellentesque et libero lacus. Etiam condimentum diam pellentesque quam pretium ut gravida velit rutrum. Pellentesque sapien mauris, semper accumsan tristique at, hendrerit sed nunc. Quisque diam odio, dignissim quis scelerisque eu, interdum sed nibh. Sed fringilla, enim ac ultricies tristique, lacus ligula aliquet neque, et imperdiet nulla tellus in erat. In pulvinar, urna non semper congue, leo nulla vulputate dolor, et congue dui purus ac risus. Duis accumsan scelerisque consectetur. Nulla nisi justo, interdum sed porttitor a, rhoncus at lorem. Suspendisse sit amet tellus est. Maecenas vestibulum tristique sapien eu interdum. Integer a risus odio. " +
"Vivamus ac placerat neque. Donec consectetur malesuada lectus, id euismod odio convallis sit amet. Integer eget purus vel neque sagittis blandit."

private var shorttext:String = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum lorem in dolor facilisis aliquam dictum libero aliquet. <a href=\"event:more\">[more]</a>.";

private function init():void
{
var object:UIComponent = new UIComponent();

this.addChild(object);

textMessage = new TextField();
textMessage.multiline = true;
textMessage.wordWrap = true;
textMessage.selectable = true;
textMessage.addEventListener(TextEvent.LINK, handleLinkClicked);

object.addChild(textMessage);

textMessage.styleSheet = getTextStyle();
textMessage.text = "<span class=\"body\">" + shorttext + "</span>";
textMessage.width = 400;
textMessage.height = 200;

}

private function getTextStyle() : StyleSheet
{
var textStyle:StyleSheet = new StyleSheet();
var fonts:String = "Arial, _sans";
textStyle = new StyleSheet();
textStyle.setStyle(".body", {fontFamily:fonts, fontSize:"12", fontWeight:"normal", color:"#222222", textDecoration:"none"});
textStyle.setStyle("a", {color:"#245290", textDecoration:"none"});
textStyle.setStyle("a:hover", { textDecoration: "underline" });
return textStyle;
}

private function handleLinkClicked(event:TextEvent):void
{
var prefix:String = event.text;
var split:Array = prefix.split(":");
var type:String = split[0];
var id:String = split[1];

if(split.length > 2) id = split[1] + ":" + split[2]; // recreate the http link

if(type == "more"){
textMessage.text = "<span class=\"body\">" + longtext + "</span>";
} else if (type == "link"){
var request:URLRequest = new URLRequest(id);
navigateToURL(request,"_blank");
}

return;
}
]]>

</mx:Script>
</mx:WindowedApplication>[/sourcode]

<strong>Workaround</strong>

I can't remember where in my web travels or blog reading I found this, but there seems to be a need to reset the TextField.htmlText value before setting the TextField.text value within AIR applications to clear the previous content. I couldn't find any official bug that reported this issue. However, doing this will eliminate the bug and reset the TextField content properly. So in the event handler for TextEvent, just before setting the content of the TextField, do the <strong>textMessage.htmlText = ""</strong>:


 private function handleLinkClicked(event:TextEvent):void
 {
 var prefix:String = event.text;
 var split:Array = prefix.split(":");
 var type:String = split[0];
 var id:String = split[1];

if(split.length > 2) id = split[1] + ":" + split[2]; // recreate the http link

if(type == "more"){
 textMessage.htmlText = ""; // reset the HTML value of the TextField
 textMessage.text = "" + longtext + "";
 } else if (type == "link"){
 var request:URLRequest = new URLRequest(id);
 navigateToURL(request,"_blank");
 }

return;
 }
 

The issue could be with setting the styles of the link tags of the TextField. However, I could not reproduce this issue with Flex in a browser, this only occurs within an AIR application. If anyone can explain why this works or point me to the bug report for this particular issue, please pass it on, thanks!

-Mister