Flex Itemrenderer issue with DropDown Control

I want to show rich text in dropdown control, for which I am using the following renderer.

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx">
  <fx:Script>开发者_开发技巧;
  <![CDATA[
  import spark.utils.TextFlowUtil;
  ]]>
  </fx:Script>
  <s:TextArea textFlow="{TextFlowUtil.importFromXML(new XML(data))}"/>
</mx:HBox>

The renderer shows html text properly in the drop down list, but in the top most option (selected item) the whole HTML tag is shown instead of what the tag represents. I am completely lost any help will be appreciated.

Thanks

What control are you using? An MX ComboBox or A Spark DropDownList control? Or a Spark ComboBox?

Since your itemRenderer mixes Halo and Spark components, it is hard to tell.

In the MX ComboBox, you can't control the prompt area with your itemRenderer. It needs to be plain text.

In the Spark ComboBox the prompt area is an actual input that you type into. Ss such will not display HTMLText.

I suspect that the Spark DropDownList control has the same limitations as the MX ComboBox, where the prompt is not created with your itemRenderer.

In all cases, you'll have toextend the component if you want to do something else.

All that said, your itemRenderer should not be mixing Halo and Spark components. The HBox is superfluous with only one item in it. So, get rid of that and replace it with the Spark ItemRenderer. Instead of binding your value, use the dataChange event. Both of these things are known to increase performance.

More info about creating Spark Renderers.