Scroll bars in dropdown list inside DataGrid itemEditor not working

Question

I have a DropDownList inside the itemEditor of my DataGrid. There are enough items in the DropDownList to align the scrollbars. You can see the scroll bars, and the wheel works fine. If you hover over the scrollbars, they will change the look (mouseover works). If you click on them, the DropDownList will close as if you clicked elsewhere in the data grid.

Comment on the Adobe Forums that describe the same problem, but it is quite old and has not received an answer.

I experimented with custom skins in the hope of finding a way to capture a mouse event, but was unsuccessful.

FWIW, this is Flex4, like an AIR application.

Scratch.mxml (main code)

    <?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"
        creationComplete="windowedapplication1_creationCompleteHandler(event)">
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.events.FlexEvent;
   [Bindable] public var dataList:ArrayCollection = new ArrayCollection();

   protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
   {
    var o:Object = new Object();

    o.theChoice = "abc";
    o.choices = new ArrayCollection();
    o.choices.addItem("abc");
    o.choices.addItem("def");
    o.choices.addItem("ghi");
    o.choices.addItem("jkl");
    o.choices.addItem("mno");
    o.choices.addItem("pqr");
    o.choices.addItem("stu");
    o.choices.addItem("vwx");
    o.choices.addItem("yz ");
    dataList.addItem(o);
   }
   protected function col2Label(item:Object, column:DataGridColumn):String {
    return item.theChoice;
   }
   // If you use the labelFunction, then you must specify a sortCompareFunction
   private function sortCol2(obj1:Object, obj2:Object):int
   {
    var d1:String = obj1.col2 as String;
    var d2:String = obj2.col2 as String;
    if(d1 < d2) {
     return -1;
    } else if(d1 == d2) {
     return 0;
    }
    return 1;
   }

  ]]>
 </fx:Script>
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <mx:DataGrid id="glGrid" top="10" left="10" right="10" bottom="10"
     dataProvider="{dataList}" editable="true" >

  <mx:columns>
   <mx:DataGridColumn id="col2" 
          headerText="Column 2"  
          itemEditor="Renderers.ddlRenderer" 
          labelFunction="col2Label" 
          dataField="col2"
          sortCompareFunction="sortCol2"/>
  </mx:columns>  
 </mx:DataGrid>
</s:WindowedApplication>

ddlRenderer.mxml:

    <?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        focusEnabled="true">
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayList;

   import spark.events.IndexChangeEvent;

   [Bindable] private var myChoices : ArrayList = new ArrayList();

   override public function set data(value:Object):void
   {
    if (value != null) {
     super.data = value;
     if (ddl && myChoices) {
      myChoices.removeAll();
      var theChoice:String = value.theChoice;

      myChoices.addAll(value.choices);

      var lineChoice : String;
      for (var i:int = 0; i < myChoices.length; i++) {
       lineChoice = myChoices.getItemAt(i) as String;
       if (lineChoice == theChoice) {
        ddl.selectedItem = lineChoice;
        break;
       }
      }
     }
    }
   }

  ]]>
 </fx:Script>

 <s:DropDownList id="ddl" 
     width="100%" 
     dataProvider="{myChoices}"/>
</s:MXDataGridItemRenderer>

, , "abc", itemRenderer, "DropDownList", , .

, .

Dan

Answer 1

Adobe (SDK-27783, Flex SDK, Spark: DropDownList), . Alex Harui :

:

<s:DropDownList id="ddl" 
 width="100%" 
 dataProvider="{myChoices}" open="ddl.skin['dropDown'].owner = this"/>

, . , .

Answer 2

, mouseEvent, . framework: DropDownController.as, systemManager_mouseDownHandler processFocusOut. , dropdownlist'scrollbar, systemManager_mouseDownHandler closeDropDown, closeDropDown processFocusOut.

DropDownList :

<s:DropDownList id="ddltop"
                    top="10"
                    left="10"
                    width="100%"
                    dataProvider="{dataList.getItemAt(0).choices}"
                    />
<mx:DataGrid id="glGrid" top="50" left="10" right="10" bottom="10"

...

. systemManager_mouseDownHandler, closeDropDown.

, .