`Image` stops being clickable when placed inside the `Match`

If you run the attached sample, the back arrow icon at the top should be clickable and on each click it should print out “goBack” to the console. But for some reason it doesn’t. If you move lines 18-21 outside of the Match tag the Image magically becomes clickable again.

(file “clickbug.zip” sent to dropbox)

file

I think that issue is due to the evaluation order of behaviors. Components added by behaviors (likeEach and Match) are added to their parent panel last. This means that any other components inside the same panel (but outside the Each or Match tags) are placed above them.

In your case this means that the “Locations” text label ends up on top of the image and consumes all the button clicks. If you simple wrap the Match inside a panel of it’s own this will work out.

E.g. go from:

<Panel>
  <Match Value="{locStackEmpty}">
      <!-- cases go here -->
  </Match>
  <Text> Locations </Text>
</Panel>

to:

<Panel>
  <Panel>
    <Match Value="{locStackEmpty}">
        <!-- cases go here -->
    </Match>
  </Panel>
  <Text> Locations </Text>
</Panel>