From f8f6d08318acf3a0d40480f42e92ad08cde2af53 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Wed, 20 Jun 2018 16:09:31 +0200
Subject: [PATCH] MOBILE-2431 tabs: Fix core-tab not shown if async

---
 src/components/tabs/tab.ts  | 17 ++++++++++++++++-
 src/components/tabs/tabs.ts | 14 ++++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts
index fe5ef6fc3..b4d8cbae9 100644
--- a/src/components/tabs/tab.ts
+++ b/src/components/tabs/tab.ts
@@ -47,7 +47,19 @@ export class CoreTabComponent implements OnInit, OnDestroy {
     @Input() badge?: string; // A badge to add in the tab.
     @Input() badgeStyle?: string; // The badge color.
     @Input() enabled = true; // Whether the tab is enabled.
-    @Input() show = true; // Whether the tab should be shown.
+    @Input() set show(val: boolean) { // Whether the tab should be shown. Use a setter to detect changes on the value.
+        if (typeof val != 'undefined') {
+            const hasChanged = this._show != val;
+            this._show = val;
+
+            if (this.initialized && hasChanged) {
+                this.tabs.tabVisibilityChanged();
+            }
+        }
+    }
+    get show(): boolean { // Getter to be able to access "_show" just using .show.
+        return this._show;
+    }
     @Input() id?: string; // An ID to identify the tab.
     @Output() ionSelect: EventEmitter<CoreTabComponent> = new EventEmitter<CoreTabComponent>();
 
@@ -56,6 +68,8 @@ export class CoreTabComponent implements OnInit, OnDestroy {
 
     element: HTMLElement; // The core-tab element.
     loaded = false;
+    initialized = false;
+    _show = true;
 
     constructor(protected tabs: CoreTabsComponent, element: ElementRef, protected domUtils: CoreDomUtilsProvider) {
         this.element = element.nativeElement;
@@ -66,6 +80,7 @@ export class CoreTabComponent implements OnInit, OnDestroy {
      */
     ngOnInit(): void {
         this.tabs.addTab(this);
+        this.initialized = true;
     }
 
     /**
diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
index 2629763ae..2d772fcd7 100644
--- a/src/components/tabs/tabs.ts
+++ b/src/components/tabs/tabs.ts
@@ -237,10 +237,13 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
         }, 0);
 
         this.slidesShown = Math.min(this.maxSlides, this.numTabsShown);
-        this.slides.update();
-        this.slides.resize();
 
         this.slideChanged();
+
+        setTimeout(() => {
+            this.slides.update();
+            this.slides.resize();
+        });
     }
 
     protected calculateMaxSlides(): void {
@@ -357,4 +360,11 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
             this.tabs = newTabs;
         }
     }
+
+    /**
+     * Function to call when the visibility of a tab has changed.
+     */
+    tabVisibilityChanged(): void {
+       this.updateSlides();
+    }
 }