Flex 4 - Select & Deselect same item in <s:List> with a mousedown

Question

In Flex 4, I have a Spark List component with item renderers. I would like to select an item in the List by clicking on it, and deselect it also, by clicking on the same selected item. Like an on/off switch.

My item renderer has the following states:

<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
<s:State name="selected"/>
</s:states>

so I tried to add a click event listener to the item renderer with:

private function selectUnSelect():void {
if (currentState == 'selected') currentState = 'normal';
else currentState = 'selected';

}

with an awkward behaviour... where the item stay selected even after clicking it again in the selected state.

Think of using the List component without the Command (on mac) or the Control button on windows.

Answer 1

This blog post might be useful to you: http://flexponential.com/2009/12/13/multiple-selection-in-a-spark-list-without-the-control-key/

Answer 2

Rather than have the item renderer set its state, I would operate on the List itself. Have your item renderer dispatch an event when it is clicked that includes the data of the item renderer, then add a listener for that event (either in a component that extends List, or in the component that contains your list). You can then check if the data matches any of your List's selectedItems. If not, append the item to the selectedItems. If so, remove it from the selectedItems. Hope that helps.