Combobox is immediately closing when clicking on certain areas of dropdown button

Question

I have a Spark ComboBox that is automatically closing the pop up area when clicking on certain areas of the open dropdown icon. I have a ComboBox sitting next to this pop up that works perfectly.

The first pop up is a list of fonts. The second is a list of font sizes.

I noticed the font combo box started having problems when I filled it with a list of system fonts. There are 900 fonts in the array. Before this the font list was filled with 10 fonts. It works fine with 10 fonts.

The font combobox is in a Callout but that doesn't seem to matter as the second combobox works fine.

I can reproduce the popup area closing every time by clicking right in the center of the open dropdown button. Clicking above or below the center of the button and it works fine.

If I had to guess what's going on, it would be that the amount of items is causing the pop up to take longer than usual to position and that it is temporarily obscuring the area under the mouse and the mouse event is not being canceled and so the pop up area is immediately closed. I don't know but I can't think of anything else nor how to fix it.

Example Application:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       applicationComplete="windowedapplication1_applicationCompleteHandler(event)">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        s|Scroller {
            skinClass: ClassReference("com.flexcapacitor.skins.MinimalScrollerSkin");
        }
    </fx:Style>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.events.FlexEvent;

            protected function windowedapplication1_applicationCompleteHandler(event:FlexEvent):void
            {
                var fontList:Array = Font.enumerateFonts(true);
                fonts.dataProvider = new ArrayList(fontList);
                fontSizes.dataProvider = new ArrayList([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]);
                fonts.selectedIndex = fontList.length-1;
                fontSizes.selectedIndex = fontSizes.dataProvider.length-1;
            }

            public function fontLabelFunction(object:Object):String {
                if (object is Font) {
                    return Font(object).fontName;
                }
                return object as String;
            }
        ]]>
    </fx:Script>

    <s:HGroup verticalCenter="0" horizontalCenter="0">
        <s:ComboBox id="fonts" labelFunction="fontLabelFunction"/>
        <s:ComboBox id="fontSizes"/>
    </s:HGroup>

</s:WindowedApplication>

It appears that it happens when using the MinimalScrollerSkin and a large dataset and clicking exactly on the drop down arrow area.

Answer 1

It looks like it was caused by a bug in the MinimalScrollerSkin. There is a property on the MobileSkin class called useMinimumHitArea. The MinimalScrollerSkin and it's related classes extend MobileSkin. This property is set to true by default.

The documentation for this property states:

Toggles transparent, centered hit-area if the unscaled size is less than one-quarter inch square. Physical size is based on applicationDPI.

Setting this property to false in the skins fixed the issue. It also fixed the issue where the track hit area had been overflowing into the container content. I had to create a VScrollBarTrackSkin to fix that since setting useMinimumHitArea was the only thing drawing the track.