Flex - bouton sur une étincelle liste ItemRenderer ne peut pas être cliquée sous certaines conditions - Stack Overflow

I have a Spark List with my own custom renderer. When the user rolls over an item in the list, left and right buttons appear in the row allowing the user to change the value of a value being rendered. For example, if there are 5 priorities (1 to 5), the left button decreases the value and the right button increases it.

Quick note: they're not really buttons, but s:Images designed to work like buttons.

Now this works fine, except under one particular condition: If the user selects the row, then moves the cursor out of the row, then back into the row, when the user clicks on either button, nothing happens. Even though this scenario sounds convoluted it's something the test users do all the time! It's really frustrating for them.

I have discovered the reason for this behaviour: The buttons are only displayed in the hover and selected states of the item renderer. This is what I want to happen - the buttons should not be visible unless the user's pointer is capable of pressing them. When an item is selected in the list the state of the renderer goes to selected. Clicking again doesn't change the state. Moving the pointer out of the row, then back in again and clicking (on the already selected row) makes the row's state go from selected, to normal (when mouse-down) and back to selected (on mouse-up). I find this very odd! It means that the button actually disappears when in state normal (which it should) thus isn't being clicked).

I had considered that somehow I could have the images "higher up" in the Z-order on the item renderer and thus they intercept the click event before the item renderer gets it, but I can't get this to work.

Can anyone help?

If it helps, a snippet from the 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 issue was caused by a spurious rollOut event on the highest level of the components that made up the ItemRenderer. This rollOut called a method which consisted of:

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

This was causing the problem and removing the rollOut and the method fixed the issue. Quite why a roll-out is being activated on mouseDown I don't know.

I have a Spark List with my own custom renderer. When the user rolls over an item in the list, left and right buttons appear in the row allowing the user to change the value of a value being rendered. For example, if there are 5 priorities (1 to 5), the left button decreases the value and the right button increases it.

Quick note: they're not really buttons, but s:Images designed to work like buttons.

Now this works fine, except under one particular condition: If the user selects the row, then moves the cursor out of the row, then back into the row, when the user clicks on either button, nothing happens. Even though this scenario sounds convoluted it's something the test users do all the time! It's really frustrating for them.

I have discovered the reason for this behaviour: The buttons are only displayed in the hover and selected states of the item renderer. This is what I want to happen - the buttons should not be visible unless the user's pointer is capable of pressing them. When an item is selected in the list the state of the renderer goes to selected. Clicking again doesn't change the state. Moving the pointer out of the row, then back in again and clicking (on the already selected row) makes the row's state go from selected, to normal (when mouse-down) and back to selected (on mouse-up). I find this very odd! It means that the button actually disappears when in state normal (which it should) thus isn't being clicked).

I had considered that somehow I could have the images "higher up" in the Z-order on the item renderer and thus they intercept the click event before the item renderer gets it, but I can't get this to work.

Can anyone help?

If it helps, a snippet from the 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 issue was caused by a spurious rollOut event on the highest level of the components that made up the ItemRenderer. This rollOut called a method which consisted of:

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

This was causing the problem and removing the rollOut and the method fixed the issue. Quite why a roll-out is being activated on mouseDown I don't know.

Source