Flex Chronicles #17: PopUp’s in a Modal PopUp

Flex 1.5 (and Flex 1, and Flash 8, and Flash MX 2004) have a class called mx.managers.PopUpManager that allows you to create modal windows. You don’t have to make them modal, but modality ensures that users handle the interface you’ve provided for them first and prevent them from doing anything else until they have.

The problem is when you open multiple popups that are modal and have the same parent. A preferences form for example could be opened in a modal popup window which in turn launches another modal popup. It uses very low-level ActionScript to create a “mouse shield” that prevents user mouse clicks from activating anything behind the popup. This ensures that the user can only click on whatever is in front of the shield. Others have found that some keyboard presses can get through, but it’s rare enough to not be a problem.

The problem here, however, is if you have a component in the 2nd popup that utilizes it’s own non-modal popup. Since some components, namely Panel’s and TitleWindow’s use a shadow that’s actually created in 1 depth below them in their parent’s drawing stack (timeline), the PopUpManager’s modal code compensate’s for this and moves the modal mouse shield 2 depths lower to give it breathing room. For some reason I can’t pin down, nor care to at this point, additional non-modal popups are put behind this lastest shield. So, in the case of a ComboBox for example, the popup list will appear behind your form AND the modality (mouse shield).

My hack, after it creates the custom List component in a popup (think auto-complete field), is to have the component check if the parentDocument’s deletePopUp method is not undefined. If it’s not undefined, it’s a popup. If it’s a popup, I need to move my newly created List popup up 2 depths higher than the parentDocument that houses it. This works like a charm, but is a hack, breaks encapsulation, and might not work if she’s deeply nested in more than 1 level of popups.

If you’re popups start appearing behind the modality, and you’ve ensured you’ve positioned them correctly, try swapping their depths to something at least 2 higher than their parentDocument.