[FLEX-26052] Mouse events don't work on a Group with an alpha maskType and non-zero position

• Type: Bug
• Status: Open
• Priority: Major
• Resolution: Unresolved
• Affects Version/s: Adobe Flex SDK Previous
• Component/s: Spark: Group
• Environment: Affected OS(s): All OS Platforms; Affected OS(s): All OS Platforms; Language Found: English
• Assignee: Unassigned
• Reporter: Adobe JIRA
• Created: 26/Nov/10 14:10
• Updated: 01/Dec/10 10:26

Description

Steps to reproduce:
1. Compile and run this application:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">

<s:Group id="group1" x="0" width="100" height="100" maskType="alpha">
<s:mask>
<s:Group>
<s:Ellipse width="100" height="100">
<s:fill>
<s:SolidColor color="red" />
</s:fill>
</s:Ellipse>
</s:Group>
</s:mask>
<s:Button label="content" click="trace('click')" width="100%" height="100%" />
</s:Group>

<s:Group id="group2" x="100" width="100" height="100" maskType="alpha">
<s:mask>
<s:Group>
<s:Ellipse width="100" height="100">
<s:fill>
<s:SolidColor color="red" />
</s:fill>
</s:Ellipse>
</s:Group>
</s:mask>
<s:Button label="content" click="trace('click')" width="100%" height="100%" />
</s:Group>

</s:Application>

2. Try to click on the buttons
3.

Actual Results:

The first button is clickable, the second button ignores mouse events.

Expected Results:

Both Buttons should be clickable.

Workaround (if any):

Add the mask yourself so that it's not a child of the DisplayObject its trying to mask (if you do this, remember you need to set the x/y's correctly on the mask):

<?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">

<s:Group id="group1" x="0" width="100" height="100" maskType="alpha" mask="

{group1Mask}

">
<s:Button label="content" click="trace('click')" width="100%" height="100%" />
</s:Group>

<s:Group id="group1Mask">
<s:Ellipse width="100" height="100">
<s:fill>
<s:SolidColor color="red" />
</s:fill>
</s:Ellipse>
</s:Group>

<s:Group id="group2" x="100" width="100" height="100" maskType="alpha" mask="

{group2Mask}

">
<s:Button label="content" click="trace('click')" width="100%" height="100%" />
</s:Group>

<s:Group id="group2Mask" x="100">
<s:Ellipse width="100" height="100">
<s:fill>
<s:SolidColor color="red" />
</s:fill>
</s:Ellipse>
</s:Group>

</s:Application>