Seemingly simple skinning problem in Flex4; style gives disco effect

I'm doing something wrong, but I can't figure out what. Simple project in flex4, whereby I create a skinned combobox (fragments at end).

If I turn on the 3 skin references (over-skin, up-skin, down-skin), the combobox appears to simply stop working. If I remove the up-skin, hovering over the combo produces a flickering effect, where it appears to apply the style, then remove it immediately.

I get the same thing with a button instead of a combo.

I'm sure it's something really simple, but it's evading me.

    <?xml version="1.0" encoding="utf-8"?>
    <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" minWidth="955" minHeight="600" xmlns:containers="flexlib.containers.*">
        <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
        </fx:Declarations>
        <fx:Style>
            @namespace s "library://ns.adobe.com/flex/spark";
            @namespace mx "library://ns.adobe.com/flex/mx";
            #myCombo
            {   
                over-skin: ClassReference("nmx.MyComboSkin");
                up-skin: ClassReference("nmx.MyComboSkin");  
                down-skin: ClassReference("nmx.MyComboSkin");
            }

        </fx:Style>
        <fx:Script>
            <![CDATA[
                [Bindable]
                public var items:Array = ["A","B","C"];
            ]]>
        </fx:Script>

        <mx:Canvas backgroundColor="#ff0000" width="726" height="165" x="20" y="41">

            <mx:ComboBox  id="myCombo" x="10" y="10" prompt="Hospital" dataProvider="{items}">

            </mx:ComboBox>

        </mx:Canvas>

    </s:Application>

Skin Definition:

    package nmx
    {
        import flash.display.GradientType;
        import flash.display.Graphics;

        import mx.skins.Border;
        import mx.skins.ProgrammaticSkin;
        import mx.skins.halo.ComboBoxArrowSkin;
        import mx.skins.halo.HaloColors;
        import mx.utils.ColorUtil;

        public class MyComboSkin extends ProgrammaticSkin
        {

                public function MyComboSkin()
                {
                    super();
                }

                override protected function updateDisplayList(w:Number, h:Number):void
                {
                    trace(name);

                    super.updateDisplayList(w, h);

                    var arrowColor:int = 0xffffff;

                    var g:Graphics = graphics;

                    g.clear();



                    // Draw the border and fill.
                    switch (name)
                    {
                        case "upSkin":
                        case "editableUpSkin":
                        {

                            g.moveTo(0,0);
                            g.lineStyle(1,arrowColor);
                            g.lineTo(w-1,0);
                            g.lineTo(w-1,h-1);
                            g.lineTo(0,h-1);
                            g.lineTo(0,0);

                        }
                        break;

                        case "overSkin":
                        case "editableOverSkin":
                        case "downSkin":
                        case "editableDownSkin":
                        {

                            // border
                            /*drawRoundRect(
                                0, 0, w, h, cr,
                                [ themeColor, themeColor ], 1);
                            */
                            g.moveTo(0,0);
                            g.lineStyle(1,arrowColor);
                            g.lineTo(w-1,0);
                            g.lineTo(w-1,h-1);
                            g.lineTo(0,h-1);
                            g.lineTo(0,0);


                            // Draw the triangle.
                            g.beginFill(arrowColor);
                            g.moveTo(w - 11.5, h / 2 + 3);
                            g.lineTo(w - 15, h / 2 - 2);
                            g.lineTo(w - 8, h / 2 - 2);
                            g.lineTo(w - 11.5, h / 2 + 3);
                            g.endFill();

                        }
                        break;  

                        case "dis开发者_C百科abledSkin":
                        case "editableDisabledSkin":
                        {


                            break;
                        }
                    }


                }
            }


    }

I'd add a default to your switch statement that actually draws something, but it does seem like an odd problem. Does just setting:

skin: ClassReference("nmx.MyComboSkin");

help with the problem? Your skin itself is actually handling the state so you shouldn't need to assign it to each of the individual states.

Aha! Found it..

Because my skin only was drawing a hollow rectangle, the hit test was obviously failing. I.E: if the mouse pointer was over the text in the combo button, it was the over-skin, otherwise it was just the normal upSkin.

Adding the following fixes this:

g.beginFill(0x0000ff,0);
g.drawRect(0,0,w,h);
g.endFill();

Which draws a totally transparent rectangle (!).