How to get Flex 3 ComboBox width to adjust based on bound dataProvider contents having changed?

Question

In Flex 3, I've created a ComboBox within an MXML component similar to the following:

<mx:ComboBox id="comboBox" dataProvider="{_choices}" />

<mx:Script>
<![CDATA[
  import mx.collections.ArrayCollection;
  // etc...
  public function get choices():ArrayCollection { return _choices; }

  [Bindable]
  private var _choices:ArrayCollection =
    new ArrayCollection( [ { data: "ALL", label: "All" } ] );
  // etc...
]]>
</mx:Script>

</mx:HBox>

In the parent MXML application, I'm modifying the contents of the choices property:

myComponentId.choices.removeAll();
myComponentId.choices.addItem({data: "NY", label: "New York"});
myComponentId.choices.addItem({data: "CA", label: "California"});
// etc...

The binding is working in that the ComboBox is automatically picking up the new contents added at runtime, however it is not adjusting its width. The initial width of the ComboBox is wide enough only to show the initial item "All" declared in the component. However, I want and would have expected the ComboBox to re-size automatically during binding to be able to show "California", but it isn't.

How can I get the ComboBox to update its width after I have added new wider labels to its dataProvider? Thank you!

Answer 1

You probably just need to call invalidateProperties(), invalidateDisplayList(), invalidateSize(), or some combination of the three (I'm something of a flex newbie myself), to force an update to the component's measurements after changing the data provider or its contents.

myComponentId.invalidateSize();
myComponentId.invalidateDisplayList();
myComponentId.invalidateProperties();

Answer 2

I would add a setter for choices and call validateNow() on the ComboBox at the end of the setter:

public function set choices(value:ArrayCollection):void
{
    _choices = value;

    comboBox.validateNow();
}

Answer 3

I encountered the same problem and neither of these worked for me. I managed to solve this by creating a new event handler

menuComboBox.addEventListener(ResizeEvent.RESIZE, updateListWidth);

The method called in this event simply resizes the dropdown.width property.

private function updateListWidth(event:ResizeEvent):void {
        menuComboBox.dropdown.width = menuComboBox.width;
}