Flex Strangeness - Part One: Setting openDuration to 0 on Menu will break Alert.show()


After getting some complaints that the tween effect when displaying a menu in Flex looked ‘flex-default-n00bish’ I went on a quest to remove it.

I found out that I could set the duration of the tween to zero by doing a menu.setStyle("openDuration", 0) - thus removing the effect. That worked fine, but later I noticed that an Alert in my application didn’t show anymore. It turned out that it was the style change on the menu that caused this.

What happens is that the whole application is blurred - but no modal dialog is shown. So, the whole application is freezed. This is how it looks on my machine:


Check it out for yourself here (source view is enabled btw). Just click the menu button, and then select any menu item.

Here’s the complete code (mostly copy’n’paste from the flex docs, I’ve only added the setStyle and menuHandler).

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml

import mx.controls.Alert;
import mx.events.MenuEvent;
import mx.controls.Menu;

// Method to create an Array-based menu.
private function createAndShow():void {
// The third parameter sets the showRoot property to false.
// You must set this property in the createMenu method,
// not later.
var myMenu:Menu = Menu.createMenu(null, menuData, true);
myMenu.setStyle("openDuration", 0); // setting openDuration to 0 will break the Alert.show() below

myMenu.show(10, 10);
myMenu.addEventListener( MenuEvent.ITEM_CLICK, menuHandler);

private function menuHandler( ev:MenuEvent ):void
Alert.show("Are you sure you’d like to click this menu item?”, “Are you sure?”, Alert.YES|Alert.NO|Alert.CANCEL, this );

// The Array data provider
public var menuData:Array = [
{label: “MenuItem A”, children: [
{label: “SubMenuItem A-1”, enabled: false},
{label: “SubMenuItem A-2”, type: “normal"}
{label: “MenuItem B”, type: “check”, toggled: true},
{label: “MenuItem C”, type: “check”, toggled: false},
{type: “separator"},
{label: “MenuItem D”, children: [
{label: “SubMenuItem D-1”, type: “radio”,
groupName: “g1"},
{label: “SubMenuItem D-2”, type: “radio”,
groupName: “g1”, toggled: true},
{label: “SubMenuItem D-3”, type: “radio”,
groupName: “g1"}

<!-- Button control to create and open the menu. -->
<mx:Button x="300" y="10"
label="Open Menu”

Why does this happen? Is it a Flex bug?


Leave a comment

Remember my personal information

Notify me of follow-up comments?