Flex 4: Custom ScrollBar not working in Custom DropDownList

Question

Hello,
I'm having an odd issue that I just cannot figure out. I have a custom DropDownList .as component (to pass color values) and a custom skin. In this skin I am using a custom Scroller (same AS file component with mxml skin). When I use this configuration, clicking on the scrollbar just closes the DropDown. If I remove the skin from my custom scrollbar it works, which leads me to believe it has something to do with the DropDown skin. Even if I revert my custom Scroller to the spark Scroller, it still doesn't work. I've narrowed it down to what seems like a problem with my DropDownList skin.
Not really sure what code to put here, but all I've been doing is right clicking my project and making new ActionScript components and MXML skins from the default skin. Here is my DropDownList skin, not sure if I should paste any other code? I have no idea what would be causing this, so I don't really know what code to place.
      [HostComponent("ccm.DropDown.DropDownList")]          

Answer 1

Woops, the code didn't place correctly, here it is:
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5" xmlns:Scroller="ccm.Scroller.*" xmlns:DropDown="ccm.DropDown.*">
    <fx:Metadata>
          [HostComponent("ccm.DropDown.DropDownList")]
     </fx:Metadata>
    <!-- host component -->
     <fx:Script fb:purpose="styling">
          <![CDATA[           
               import flash.filters.BitmapFilterQuality;
               import flash.filters.BitmapFilterType;
               import mx.controls.Alert;
               import spark.filters.*;
               /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
               static private const contentFill:Array = [];
                * @private
               override public function get contentItems():Array {return contentFill};
                * @private
               override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                    openButton.setStyle("cornerRadius", getStyle("cornerRadius"));
                    super.updateDisplayList(unscaledWidth, unscaledHeight);
          ]]>
     </fx:Script>
     <s:states>
          <s:State name="normal" />
          <s:State name="open" />
          <s:State name="disabled" />
     </s:states>
     <!---
     The PopUpAnchor control that opens the drop-down list.
     <p>In a custom skin class that uses transitions, set the
     <code>itemDestructionPolicy</code> property to <code>none</code>.</p>
     -->
     <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
                       left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
                       popUpPosition="below" popUpWidthMatchesAnchorWidth="true" >
          <!---
          This includes borders, background colors, scrollers, and filters.
          @copy spark.components.supportClasses.DropDownListBase#dropDown
          -->
          <s:Group maxHeight="134" minHeight="22" >
               <s:Rect id="fill" left="1" right="1" top="1" bottom="0" bottomLeftRadiusX="16.5" bottomRightRadiusX="16.5" topLeftRadiusX="16.5" topRightRadiusX="16.5" >
                    <s:fill>
                         <s:SolidColor color="0xFFFFFF" />
                    </s:fill>
                    <s:filters>
                         <s:GlowFilter
                              color="0x000000"
                              alpha=".35"
                              blurX="6"
                              blurY="6"
                              strength="1"
                              quality="{BitmapFilterQuality.HIGH}"
                              inner="true"
                              knockout="false"/>
                    </s:filters>
               </s:Rect>
               <!--- @private -->
               <Scroller:Scroller id="scroller" left="8" top="8" right="8" bottom="8" hasFocusableChildren="false" minViewportInset="1"
                                      showButtons="false"
                                      trackColor="{hostComponent._trackColor}"
                                      thumbColor="{hostComponent._thumbColor}"
                                      skinClass="ccm.Scroller.ScrollerSkin">
                    <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
                    <s:DataGroup id="dataGroup" itemRenderer="ccm.DropDown.DropDownItemRenderer">
                         <s:layout>
                              <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                         </s:layout>
                    </s:DataGroup>
               </Scroller:Scroller>
          </s:Group>
     </s:PopUpAnchor>
     <!---  The default skin is DropDownListButtonSkin.
     @copy spark.components.supportClasses.DropDownListBase#openButton
     @see spark.skins.spark.DropDownListButtonSkin -->
     <DropDown:DropDownButton id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
                                    skinClass="ccm.DropDown.DropDownButtonSkin"
                                    buttonColor="{hostComponent._buttonColor}"
                                    /> 
     <!--- @copy spark.components.DropDownList#labelDisplay -->
     <s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1"
                mouseEnabled="false" mouseChildren="false"
                left="12" right="30" top="2" bottom="2" width="75" verticalCenter="1" />
</s:SparkSkin>