Checkbox not checked in dropdown itemrendere flex - actionscript-3

Question

I have DropDownlist which have Itemrenderer like following:
<s:DropDownList dataProvider="{testList}" labelField="test"
itemRenderer="DropDownSelectRenderer"/>
ItemRenderer:
<s:ItemRenderer 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[
protected function onChange(event:Event):void
{
trace("checked");
}
]]>
</fx:Script>
<s:CheckBox id="chkBox" selected="{data.selected}" change="onChange(event)" />
<s:Label id="lblCon" fontSize="14" text="{data.test}" />
</s:ItemRenderer>
I want the CheckBox chkBox change and label lblCon on a click event,
but When I open the Dropdown and try to click on the CheckBox, the DropDown is closed and the CheckBox is not checked.
Any help is appreciated.

Answer 1

You might want to use PopUpButton as below:
<?xml version="1.0"?>
<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">
<fx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var testList:ArrayCollection = new ArrayCollection([
{"test":"Test A", "selected": false},
{"test":"Test B", "selected": true},
{"test":"Test C", "selected": false},
{"test":"Test D", "selected": false}
]);
protected function closeButtonClickHandler(event:MouseEvent):void {
testPopUp.close();
}
]]></fx:Script>
<mx:PopUpButton id="testPopUp"
width="150">
<mx:popUp>
<mx:VBox width="150" backgroundColor="0xd3d3d3">
<mx:List id="list"
dataProvider="{testList}"
height="{testList.length * 25}"
width="100"
borderStyle="none">
<mx:itemRenderer>
<fx:Component>
<mx:CheckBox height="20">
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = value;
if (value && value.test)
{
super.label = value.test;
super.selected = value.selected;
}
}
]]>
</fx:Script>
</mx:CheckBox>
</fx:Component>
</mx:itemRenderer>
</mx:List>
<mx:Button label="Close"
click="closeButtonClickHandler(event)"/>
</mx:VBox>
</mx:popUp>
</mx:PopUpButton>
</s:Application>