mouseEnabledWhereTransparent not working as expected - apache-flex

Question

I just cannot understand why mouseEnabledWhereTransparent does not work on this skin.
The Skin this creates is basically a Button with a transparent background and a little triangle to the left side, like so: >ButtonText But the empty space around the Triangle does not receive mouse events.
I've tried wrapping another group around the triangle path and i've tried wrapping it into a Graphic Object, also without success. I could create a Rect with 0 alpha below everything, but isn't that exactly what mouseEnabledWhereTransparent should be doing for me?
<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="21" minHeight="21" alpha.disabled="0.5"
mouseEnabledWhereTransparent="true">
<!-- host component -->
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- triangle tip -->
<s:Path data="M 0 0 L 0 14 L 10 7 L 0 0" bottom="5">
<s:fill>
<s:SolidColor color="0xFFFFFF" />
</s:fill>
</s:Path>
<!-- text -->
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="bottom"
maxDisplayedLines="1"
left="14" right="10" top="2" bottom="2" color="0x000000" fontSize="14">
</s:Label>
</s:SparkSkin>

Answer 1

Yo, what you need is to add a rectangle before that path to act as a hit area, this works:
<s:Rect left="0" right="0" top="0" bottom="0" >
<s:fill>
<s:SolidColor alpha="0" />
</s:fill>
</s:Rect>
This guy here has a good example of making custom buttons (minus the label)

Answer 2

mouseEnabledWhereTransparent has no effect if there are no mouse event listeners on the Group it is set on. In your example the Button object has a click event listener, but the Button's skin object (SparkSkin) does not.
From the ASDoc for GroupBase.mouseEnabledWhereTransparent:
"This property only goes in to effect if mouse, touch, or flash player gesture events are added to this instance."
A workaround for you would be to add a mouse event listener to the skin that won't do anything, for example:
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
mouseEnabledWhereTransparent="true" click="doNothing()">
<fx:Script>
<![CDATA[
protected function doNothing():void {
trace('doNothing');
}
]]>
</fx:Script>
...
</s:SparkSkin>
The main use case for this property has been adding click events directly to a Group, but it is interesting to think about the case you bring up. It might be reasonable to file an enhancement request along the lines of "Setting mouseEnabledWhereTransparent on a skin should have an effect if the hostComponent has mouse listeners attached".