Flex 4 – cut/Copy/Paste context menus not appearing

The right-click context menu for s:TextArea s:RichTextEditor, s:TextEdit, etc. is an expected feature for any sort of form functionality however a bug in s:Panel breaks this functionality whenever the control is inside an s:Panel item.

<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">
...
    <!-- right-clicking this will show a context with cut/copy/paste -->
    <s:TextArea text="text in app" />
    <!-- right-clicking this will NOT show a context with cut/copy/paste -->
    <s:Panel>
        <s:TextArea text="text in panel" />
    </s:Panel>
...
</application>

Note that this doesn’t affect ctrl+v/p/x keybindings – they work regardless.

There is a hack to get around this –  mark both the s:panel as well as it’s skin as mouseEnabled=”true”. What that means is that EVERY spark panel needs to have a custom skin with that override. This includes cases where there are two enclosing panels.

<!-- this won't work -->
<s:Panel>
    <s:Panel mouseEnabled="true" skinClass="CustomPanel">
        <s:TextArea text="text in panel" />
    </s:Panel>
</s:Panel>

<!-- this won't work -->
<s:Panel skinClass="CustomPanel" mouseEnabled="true">
    <s:Panel>
        <s:TextArea text="text in panel" />
    </s:Panel>
</s:Panel>

<!-- this WILL work -->
<s:Panel skinClass="CustomPanel" mouseEnabled="true">
    <s:Panel skinClass="CustomPanel" mouseEnabled="true">
        <s:TextArea text="text in panel" />
    </s:Panel>
</s:Panel>

It’s a major pain, but it is a workable solution where needed. To create the skin, in eclipse:-

1. Click ‘file’ > ‘new’ > ‘MXML Skin’
2. Enter the name for the skin
3. Set the HostComponent as ‘spark.components.Panel’
4. Check ‘create as copy of’
5. Set to copy ‘spark.skins.spark.PanelSkin’
6. Click ‘finish’
7. In the ‘<s:SparkSkin ..>’ tag set mouseEnabled=”true”
8. Set  mouseEnabled=”true” on your ’<s:Panel ..>’ tag
9. On your ‘<s:Panel ..>’ tag set skinClass=”" to your new skin class

Now cut/copy/paste should appear in your context menu.