ComboBox click event conflict with its container

I want change the HBox's style when click any object inside this HBox. I set handle for click event of HBox, and then I found it very difficult to select item in the combobox in this HBox.

When I click the combobox, it drops down its item list, and HBox style changed, then combobox drop up very quickly, I have no time to select an item in the Combobox.

Here is my codes, is there any way to avoid this pro开发者_如何学Pythonblem?

<mx:Repeater id="itemRepeater">
    <mx:HBox id="itemHBox" styleName="active" click="onItemClick(event);">
        <mx:ComboBox id="cb1" dataProvider="{dp}" close="closeHandler(event);"/>
        <mx:TextArea id="itemText" />
    </mx:HBox>
</mx:Repeater>

private function onItemClick(e:MouseEvent):void {
    for (var k:Number=0; k < total; k++) {
        itemHBox[k].styleName = "Inactive";
    }
    // Change edit style
    itemHBox[e.currentTarget.instanceIndices].styleName = "active";
}

Setting styleName invalidates HBox and forces it's children to check their size and relayout, that's why ComboBox hides it's dropdown list.

Instead you can use precise style values:

private function onItemClick(e:MouseEvent):void {
    for (var k:Number=0; k < total; k++) {
        itemHBox[k].setStyle("backgroundColor", 0xFFFFFF);
    }
    // Change edit style
    itemHBox[e.currentTarget.instanceIndices].setStyle("backgroundColor", 0xFF0000);
}