Nativescript: Tapping on a layout - actually taps behind elements

[RoyiNamir]

Simplification :

I have 2 Buttons and a StackLayout ( which is inside a gridview ) which is _"sliding"_ from the right side.

 <Button (tap)="onShowTapped(slidePosition)" ...></Button>
 <Button (tap)="onShowTapped(slidePosition)" ...></Button>

(the first button shows(!) the overlay , the second one hides(!) it)

Later on (_as a sibling markup_) I have this Layout ([full markup here]):

 <StackLayout slide-in slideFrom="right">
     <Label class="drawer" text="A wild right view has appeared" textWrap="true"></Label>
 </StackLayout>

Here it how it looks :

So where is the problem ?

If you notice - I click on the overlay(!) which has a z-index:999 above the "close" button - and it actually taps the button!

Question

What should I change in order for tapping the overlay - not to cause tapping on the button under it ?

Here is the playground for the app

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @RoyiNamir,
I tested this odd behavior on my side and was able to reproduce this issue only for android.
As a workaround at this time, I would suggest to set up tap event on the layouts, which are shown with the animation. For example:

<StackLayout (tap)="onTap()" slide-in slideFrom="left" selector="left" class="left-drawer" col="0" rowSpan="5" colSpan="2" row="0">
        <Label class="drawer" text="Maybe navigation?"></Label>
    </StackLayout>

This will allow the StackLayout to cosume the event and the button will not be active under the Layout.

Another option could be to use isUserInteractionEnabled property and to disable the button interaction when it is needed.

[westlakem]

@tsonevn I was running into the same issue as the OP but your solution didn't help for me.

<StackLayout class="page"> <ActionBar title="Home"> <Button text="OPEN DRAWER" (tap)="openDrawer()" class="drawerContentButton" style="horizontal-align: right"></Button> </ActionBar> <GridLayout columns="*"> <RadSideDrawer tkExampleTitle tkToggleNavButton> <StackLayout tkDrawerContent class="sideStackLayout"> <StackLayout class="sideTitleStackLayout"> <Label text="Navigation Menu"></Label> </StackLayout> <StackLayout class="sideStackLayout"> <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label> <Label text="Social" class="sideLabel"></Label> <Label text="Promotions" class="sideLabel"></Label> <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label> <Label text="Important" class="sideLabel"></Label> <Label text="Starred" class="sideLabel"></Label> <Label text="Sent Mail" class="sideLabel"></Label> <Label text="Drafts" class="sideLabel"></Label> </StackLayout> <StackLayout (tap)="onCloseDrawerTap()"> <Button text="Close Drawer" padding="10" style="horizontal-align: center"></Button> </StackLayout> </StackLayout> <StackLayout tkMainContent> <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label> </StackLayout> </RadSideDrawer> <ListView [items]="items" class="list-group"> <ng-template let-item="item"> <Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label> </ng-template> </ListView> </GridLayout> </StackLayout>

Still clicks what's under it

[tsonevn]

Hi @westlakem,
Could you provide more info what the case and which tap event is fired behind the element?
Also, it would help if you provide sample project, which could be debugged locally.

Thank you in advance for your cooperation.

[westlakem]

@tsonevn It's the angular starter project with PRO-UI suite. I think the only other changes are what I posted, but I don't remember :-(

[tsonevn]

Hi @westlakem,
I tested this case with the SideDrawer, however, I was unable to recreate the problem.
I notice that the ListView is set outside the RadSideDrawer, which will prevent its opening. The content of the Page should be set inside the tkMainContent directive. For your convenience, I am attaching a sample project.
Archive.zip

@RoyiNamir, at this time this issue is still under review and I could not commit to the exact time when the fix will be available.

[SGissubel]

Any updates on this issue?

I currently have the following:

<GridLayout col="0" rows="20, 20" (tap)="navTo('business-subcription')">
  <Label row="0" class="subscription-labels_left" text="0"></Label>
  <Label class="subscription-labels subscription-labels_left" row="1" text="businesses"></Label>
</GridLayout>

And I can only click small areas around the labels to trigger the tap & method;

[SGissubel]

In case anyone has a similar issue as mine above, I solved with just fixing up all of my row sizing PLUS using StackLayout instead of GridLayout.

[KhalifaGad]

This issue still exist in nativescript 6, with AbsoluteLayout too.

[edusperoni]

I've created an issue to track a possible implementation for this. Please weigh in there #7310