How to ensure that the popUp always displays above the PopUpButton? With test case and screenshot

Question

Few users of my Flex 4.6 web application are complaining, that the mx.controls.PopUpButton at the right bottom corner of it sometimes opens a List underneath it and is thus unusable (I can't reproduce that myself - probably an unlucky combination of their Flash player and/or font size setting?)

How could I ensure, that the popUp component (in my case it is a spark.components.List) always opens above the PopUpButton?

I suspect, that I should create a skin based on mx.skins.halo.PopUpButtonSkin and assign it to my PopUpButton? And I probably should use the PopUpPosition.ABOVE constant together with the PopUpAnchor?

But I'm not sure how to put it together - can anybody please share some instructions?

I have prepared a screenshot and a simple Text.mxml:

<?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"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    creationComplete="init()">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.collections.ArrayCollection;
            import spark.components.List;

            [Bindable]
            private var _data:ArrayCollection = new ArrayCollection();

            [Bindable]
            private var _list:List = new List();

            public function init():void {
                _data.addItem({label: "One"});
                _data.addItem({label: "Tow"});
                _data.addItem({label: "Three"});
                _data.addItem({label: "Four"});
                _data.addItem({label: "Five"});

                _list.dataProvider = _data;
                _list.setStyle('fontSize', 36);
            }
        ]]>
    </fx:Script>

    <mx:PopUpButton right="10" bottom="10" fontSize="24" popUp="{_list}"/>
</s:Application>

UPDATE:

I've found a solution by Simon Bailey MX ComboBox Open Direction Bug - Alternative Solution and it kind of works, but unfortunately prevents me from dispatching my custom event when the main (not the arrow) button is clicked.

Also I've looked at the PopUpButton.as source code and wonder if maybe the height of the List is 0 while it is being checked there:

private function displayPopUp(show:Boolean):void
{
    ......
    // XXX I suspect the _popUp.height below is 0
    // XXX for the users having the trouble

    if (show)
    {          
       if (point.y + _popUp.height > screen.bottom && 
            point.y > (screen.top + height + _popUp.height))
        { 
            // PopUp will go below the bottom of the stage
            // and be clipped. Instead, have it grow up.
            point.y -= (unscaledHeight + _popUp.height + 2*popUpGap);
            initY = -_popUp.height;
        }

I still can't reproduce the bug myself, my users aren't very helpful (mostly older folks, playing my card game). I've searched in Adobe JIRA, but couldn't find such a bug.

I wonder, if there is a way to short-circuit that method to enforce opening the popUp above the PopUpButton.

Or if I should put the _list into some container...

Answer 1

PopUpButton doesn't use a PopUpAnchor. It sets the position of the pop-up internally in the private function named displayPopUp().

Why not use the Spark DropDownList instead? Isn't that what you've effectively created here?