Null in Flex ComboBox

Question

How can you make a ComboBox where the user can select null?

If you simply create a combobox with null in the dataprovider, the value appears but the user cannot select it:

<mx:ComboBox id="cb" dataProvider="{[null, 'foo', 'bar']}" />

Is there a way to make that null selectable?

A workaround is to add an item into the dataProvider that is not null but 'represents' null; and then map between null and that object every time you access the combobox. But that's not really an elegant solution; you would always have to keep this mapping in mind in all code that accesses a 'nullable' combobox...

Edit: expanding on why I don't like the workaround: It could be done in a subclass of course, but either I introduce new attributes (like nullableSelectedItem); but then you have to be careful to always use these attributes. Or I override ComboBoxes selectedItem; but I'm affraid that is going to break the base class: it might not like something changing its idea of what the current selected item is from within. And even this fragile hack works, on top of selectedItem and dataProvider this nullItem then also needs to be handled special in data and listData for renderers, in labelFunction, and then it's probably still being exposed in events the ComboBox sends... It might work, but it's quite a hack just to fix the problem that if the user clicks on the item it isn't activated (for the rest the ComboBox handles null fine). (Another alternative is to have a ui component delegate to a ComboBox, but that's even much more code just to avoid this small problem)

Answer 1

Hi,

Unfortunately, this is impossible. How ever, a good solution that will not make you "have to keep this mapping in mind" is to create a class inherits from ComboBox with its own DataProvider property.

this property setter will handle the null values and have a representation for it on the super ComboBox class.

Answer 2

The following solution is likely the simpliest one:

<mx:ComboBox id="cb" dataProvider="{[{label:"", data:null}, {label:'foo', data:'foo'}, {label:'bar', data:'bar'}]}" />

and access the data using cb.selectedItem.data

However, this simple solution is not binding-friendly, as Wouter mentioned.

So here is a more tricky solution that will allow selecting null objects:

<mx:ComboBox id="cb" dataProvider="{[null, 'foo', 'bar']}" dropdownFactory="{new ClassFactory(NullList)}" />

Where NullList is the following class:

package test
{
import mx.controls.List;

public class NullList extends List
{
    public function NullList()
    {
     super();
    }

    override public function isItemSelectable(data:Object):Boolean
    {
     if (!selectable)
            return false;
        return true;
    }

}
}

Answer 3

A really simple, but also very limited solution is to add a prompt="" attribute..

This will prevent the ComboBox from selecting the first item in the dataProvider automatically, but as soon as the user select an item, the empty row will not be displayed anymore.

Answer 4

@Cosma: Genius. Thank you very much.