Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Angular Ionic Android back button callback is executing twice #30115

Open
3 tasks done
imalitavakoli opened this issue Jan 7, 2025 · 0 comments
Open
3 tasks done
Labels

Comments

@imalitavakoli
Copy link

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

app.component.html:

<ion-app role="main">
  <ion-content [attr.scroll-y]="true">
    <router-outlet></router-outlet>
  </ion-content>
</ion-app>

my page (component) TS file:

import { Component, inject, OnDestroy, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { Subscription } from 'rxjs';
import { Platform } from '@ionic/angular/standalone';

@Component({
  selector: 'e-test',
  standalone: true,
  imports: [CommonModule, RouterModule],
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit, OnDestroy {
  private readonly _platform = inject(Platform);
  private _backSub!: Subscription;

  ngOnInit() {
    this._backSub = this._platform.backButton.subscribeWithPriority(
      101,
      () => {
        console.log('back button called');
      },
    );
  }

  ngOnDestroy(): void {
    if (this._backSub) this._backSub.unsubscribe();
  }
}

As far as I can see, everything is correct! But my callback will be called twice!
Can someone help? Thanks a lot ❤️

Expected Behavior

The callback should be called only once, because we subscribed to subscribeWithPriority only once... And we also unsubscribe from it, whenever the component is destroyed.

Steps to Reproduce

  1. Simply click the Android native back button.
  2. Then you will see that 'back button called' console log message shows twice.

Code Reproduction URL

https://stackblitz.com/edit/wusmwpve?file=src%2Fapp%2Fexample.component.ts

Ionic Info

Ionic:

Ionic CLI : 7.2.0

Utility:

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

System:

NodeJS : v20.11.0
npm : 10.2.4
OS : Windows 10

Additional Information

No response

@ionitron-bot ionitron-bot bot added the triage label Jan 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant