The button in the ItemRenderer spark list cannot be pressed under certain conditions

Question

I have a Spark List with my own visualizer. When the user rolls an item in the list, the left and right buttons appear on the line, allowing the user to change the value of the displayed value. For example, if there are 5 priorities (from 1 to 5), the left button decreases the value, and the right button increases it.

Quick note: they are not really buttons, but s: images designed to work like buttons.

Now this works fine, except for one specific condition: if the user selects a line, then moves the cursor from the line, and then back to the line, when the user clicks on any button, nothing happens. Although this script sounds confusing, this is what users are testing all the time! It really upsets them.

I found the reason for this behavior: buttons are displayed only in the hover mode and selected states of the item renderer. This is what I want to do - buttons should not be visible unless the user pointer can click them. When an item is selected in the list, the rendering state goes to the selected one. Repeated pressing does not change the state. Moving the pointer from the line, and then again and again pressing (in the already selected line) causes the state of the line to go from the selected one to normal (when you hover the mouse pointer) and back to the selected one (using the mouse). I find it very strange! This means that the button actually disappears when in the normal state (that it should), thus not being pressed).

I thought that somehow I could have the images “higher” in the Z-order on the renderer of the elements and thus they capture the click event before the element renderer gets it, but I can't get it to work.

Can anyone help?

If this helps, the snippet from ItemRenderer is below:

<s:HGroup width="150" verticalAlign="middle" verticalCenter="0">
  <s:Image id="previousItemButton" buttonMode="true" source="{_leftArrow}" width="16" height="16" visible.normal="false" visible.hovered="true" visible.selected="true" click="previousClicked(event)"/>
  <s:Label text="{data.outputFormat.value}" width="100%" click="nextClicked(event)"/>
  <s:Image id="nextItemButton" buttonMode="true" source="{_rightArrow}" width="16" height="16" visible.normal="false" visible.hovered="true" visible.selected="true" click="nextClicked(event)"/>
</s:HGroup>

UPDATE:

The problem was caused by a false rollOut event at the highest level of the components that made up the ItemRenderer. This rollOut called a method that consisted of:

protected function hgroup1_rollOutHandler(event:MouseEvent):void {
  if (this.selected) {
    this.selected = false;
  }
}

This caused the problem and removed rollOut, and the method fixed the problem. Quite why a U-turn is activated on mouseDown, I don't know.