Nativescript Tap events not working inside tabview iOS

Question

I have a simple TabView with two tabs, each with one button in it, the touch event on the button shows some strange behaviour.

If I simply output the TabView directly all events work:

<GridLayout rows="*">
  <TabView row="0">
    <StackLayout *tabItem="{title: 'Tab 1'}">        
      <button background="red" (tap)="alert('Hello 1')"></button>  
    </StackLayout>
    <StackLayout *tabItem="{title: 'Tab 2'}">        
      <button background="red" (tap)="alert('Hello 2')"></button>  
    </StackLayout>
  </TabView>
</GridLayout>

Now when I show the TabView conditionally after the app fetches some data, I get some unexpected behaviour:

 <TabView *ngIf="VarSetAfterServerResponse">
  ....

The Tap event of the first button will only trigger once or twice, the last button will keep on working.

This is a simplified example. I am getting this throughout all tabs with more complicated content in it, none of the event listeners that are set from within the HTML work. EventListeners attached from TypeScript are not reliable as well, tried to set theses inside all the Angular LifeCycleEvents.

This is only a problem on iOS.

Can you show us how you have placed TabView within your template? — Manoj
– Manoj, Commented Jul 2, 2019 at 15:56
Sure, see edited post, it is inside a GridLayout, nothing else — Jeroen
– Jeroen, Commented Jul 3, 2019 at 7:01

Manoj · Accepted Answer · 2019-07-03 07:12:04Z

0

It seems to be a bug with {N} Angular, you might want to report on Github. As a workaround you may use visibility on TabView.

<TabView [visibility]="VarSetAfterServerResponse ? 'visible' : 'hidden'">
  ....

answered Jul 3, 2019 at 7:12

Manoj

21.9k3 gold badges23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nativescript Tap events not working inside tabview iOS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related