iOS: zIndex catching event bug

[AdmiralSG]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• Getting NativeScript versions information...
• Component nativescript. Current version is 4.2.4.
• Component tns-core-modules. Current version is 4.2.0.
• Component tns-android. Current version is 4.0.1.
• Component tns-ios. Current version is 4.0.1.

Describe the bug

I tried to change the zIndex of a stack of components clicking on a label. This is working correctly on Android platform, but on iOS platform it only changes the first time, then the zIndex reduces while clicking, but there is no visual component change. Maybe it's a catching event bug while we have a stack of elements at the same position?

Expected behavior
If we have two components in the stack, when clicking the label the first component should go backwards. The second component is what we will see now. If clicking the label, this component go backwards and the first should be shown. And then the process repeats. Every click, the zIndex reduces (From 10000 to 9999, 9998, 9997, etc...)

Sample project

Just type tns run ios, and try to reproduce the expected behaviour (we have two kind of codes in the component, one with top=15 layout to see what is happening, and the "real" one with ngFor).

Here is the repo: https://github.com/AdmiralSG/z-index-event-bug.git

[NickIliev]

@AdmiralSG I've simplified your example to make it change the zIndex based on tap and it seems to work as expected on both iOS and Android - here is my Playground demo.

Please do let me know if I am missing something (you could modify the Playground demo)

[AdmiralSG]

Hi again, i've tried your preview, but this is not the same problem. We have to have that two blocks at the same position. I mean, you cant see the green block until you tap on the red block and vice versa. In the example project, if u tap on the frame (A and B) blocks, it only works the first time on iOS. If you tap on (A) or (B) blocks it works as normal.
By the way, this preview changes does not work on my Android phone neither.

To clarify, think about two blocks. You only see the red one (zIndex 10000). You tap on it and then red block has 9999 zIndex, and you see green block who has 10000 zIndex. (You are not seeing the other block during the process). The expected behaviour is the interchange between blocks clicking on the block who has the bigger zIndex. And this zIndex is reducing every tap.

If you just delete top=100 from the second block, you will notice this is not working correctly.

Thank you!

[NickIliev]

@AdmiralSG in your case you are experiencing the conceptual differences in event propagation between iOS and Android. While on one platform the default tap event will propagate through its children it is the other way around on the other platform. Try using isPassThroughParentEnabled on iOS to enable/disable gestures passing through. See this thread for details

[AdmiralSG]

Hi again. I have tried this... but i have to say that unfortunately it does not work as expected. I have tried this in every possible layout but the behaviour is still failing. Is there any other solutions to the problem? I am hard stuck with this... :(

Thank you!