ionTabs select() does not remove active css from previous tab on Andriod (6.0.1)

[kdfemi]

Ionic version:

[x] 4.11.3

I'm submitting a ...

[x] bug report [ ] feature request

Current behavior:

When i use IonTab select method (ionTab.select('tab)) to change from a tab to another the previous selected tab and the newly selected tab are both marked active. i later tried this on higher android version(8) it worked perfectly fine Expected behavior:

The newly selected tab should only be marked active Steps to reproduce: Create ionic tab application, select ion-tabs from your class then create a dynamic way of changing tabs without clicking the tab icon. In my case i used android hardware back button

Related code:

tabs.page.html

<ion-tabs #ionTabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="store" >
      <ion-icon src="/assets/shop.svg"></ion-icon>
      <ion-label>Store</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="cart" >
      <ion-badge color="primary" *ngIf="cartItemTotal > 0">{{cartItemTotal}}</ion-badge>
      <ion-icon src="/assets/cart.svg"></ion-icon>
      <ion-label>My Cart</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="favourites" >
      <ion-icon name="heart-empty"></ion-icon>
      <ion-label>Favourites</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile" >
      <ion-icon src="/assets/profile.svg"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="settings" >
      <ion-icon src="/assets/settings.svg"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>

tabs.page.ts

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage implements OnInit {

  @ViewChild('ionTabs', {static: true}) ionTabs: IonTabs;
  constructor(
    private sharedService: SharedService,
    private ngZone: NgZone
  ) {}

  ngOnInit() {

    Plugins.App.addListener('backButton', (data) => {
      console.log('back button');
      if ('/tabs/store' === this.sharedService.presentUrl || '/' === this.sharedService.presentUrl) {
        Plugins.App.exitApp();
        return;
      }
      this.ngZone.run(() => {
        this.ionTabs.select('store');
      });
    });
  }
}

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {

  constructor(
    private platform: Platform,
    // get database ready
    private cartService: CartService,
    private localStorageService: LocalstorageService,
    private navCtrl: NavController,
    private authService: AuthService,
    private sharedService: SharedService,
    private router: Router,
  ) {}
  ngOnInit() {
    this.router.events.subscribe(e => {
      if (e instanceof NavigationEnd) {
        this.sharedService.presentUrl = e.url;
        console.log(e.url);
      }
    });
  }

  ngAfterViewInit() {
    this.initializeApp();

  }

  initializeApp() {
    this.platform.ready().then(() => {
      if (Capacitor.isPluginAvailable('SplashScreen')) {
        Plugins.SplashScreen.hide();
      }
    });
  }
}

shared.service.ts

@Injectable(
{providedIn: 'root'})

export class SharedService {

  presentUrl = '/';

}

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.5 
   Ionic Framework               : @ionic/angular 4.11.3
   @angular-devkit/build-angular : 0.803.17
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.3.19
   @ionic/angular-toolkit        : 2.0.0

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Cordova:

   Cordova CLI       : 9.0.3 (cordova-lib@9.0.2)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

#

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. The problem here is likely that the webview installed to your Android device is too outdated and does not support a certain web API that your application relies on. This API could be required by Ionic, Stencil, Angular, or any other dependency you have installed in your application.

In general, Ionic supports Chromium v60+ without any polyfills. You can run window.navigator.userAgent in the dev tools console when inspecting your application to determine which version of Chromium you are running.

A couple options for how to go about resolving this:

1. See if you can update the Android System WebView from the Google Play Store. Typically this autoupdates, but it is possible that the autoupdate got disabled at some point.
2. Enable additional polyfills in your Angular application. The Angular documentation has a great guide on how to do that: https://angular.io/guide/browser-support

For any questions regarding adding the additional polyfills, I recommend posting on the Ionic Forum. Thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.