ContextMenu unsubscribe not working

[argupta23]

Issue type

I'm submitting a ... (check one with "x")

• [x ] bug report
• feature request

Issue description

Context Menu subscription stays around even after you leave page and comeback

Current behavior:
I have looked at the Context Menu example within the documentation and also seen #695 #724

Expected behavior:
Subscription should be canceled when leaving page.

Steps to reproduce:
Create a component with the below code

1. click to open dialog
2. cancel the opened dialog
3. navigate to another page
4. comeback to this original component
5. click to open dialog
6. cancel the opened dialog
7. you will notice that there are 2 dialogs that need to be closed
8. this seems to be cyclic

Related code:

dev.component.ts

import { NbDialogService,  NB_WINDOW, NbThemeService, NbMenuService } from "@nebular/theme";
import { takeWhile } from "rxjs/operators";
import { Subscription } from "rxjs/Subscription";
import { ConfirmDialogComponent } from "../../shared/dialogs/confirmdialog.component";
import { Subject, Observable } from 'rxjs';

export class DevComponent implements OnInit, OnDestroy { 

  private destroy$: Subject<void> = new Subject<void>();

  contextMenuTag = 'DeviceTypeTemplate';
  public items = [
    { title: 'New DeviceType Template', data: {id: 'newdevtypetempl'}, icon: 'boxes', pack: "solid" },
    { title: 'Bulk Prov DeviceTypes', data: {id: 'bulkdevtypetempl'}, icon: 'file-import', pack: "solid" },
  ];

  constructor(
    @Inject(NB_WINDOW) private window,
    private menuService: NbMenuService,
    private dialogService: NbDialogService,
    private route: ActivatedRoute,
  ) {
  }

  ngOnInit() {
    // this.menuService.onItemClick()
    // .pipe(
    //   filter(({ tag }) => tag === 'DeviceTypeTemplate'),
    //   map(({ item: { title } }) => title),
    // )
    // .subscribe(title => this.window.alert(`${title} was clicked!`)

      this.menuService.onItemClick().subscribe((event) => {
        if (event.item.title === 'New DeviceType Template') {
          console.log('User Profile clicked');
          this.dialogService.open(DeviceTemplateDialogComponent,{
            hasBackdrop: true,
          closeOnBackdropClick: false,
          closeOnEsc: false,
          autoFocus: false,
          context: {
          },
        });
      } else if (event.item.title === 'Bulk Prov DeviceTypes') {
        console.log('Pwd clicked');
        this.dialogService.open(BulkProvisionDialogComponent,{
            hasBackdrop: true,
          closeOnBackdropClick: false,
          closeOnEsc: false,
          autoFocus: false,
          context: {
            operString: "DEVICE TYPE TEMPLATE",
            operString2: "devicetype",
            // _DeviceTypeFields: event.data,
          },
        });
      } 
    });
    this.setup();
  }

  public ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

xxx.component.html

        <button nbButton shape="round" size="small" status="danger" [nbContextMenu]="items" nbContextMenuTrigger="hover" nbContextMenuTag="DeviceTypeTemplate">
          <nb-icon icon="plus" pack="solid"></nb-icon>
        </button>

Other information:

node v12.x
angular 10.1.3
nebular 6.2.0

Is it a bug ? Someone could tell me how can I solve ?

[argupta23]

I was able to solve the issue, by adding the following code within dev.component.ts

private menuDestroy;

  ngOnInit() {
this.menuDestroy = this.menuService.onItemClick()
.......
}

public ngOnDestroy() {
    this.menuDestroy.unsubscribe();
}

I will appreciate of the documentation / example be updated to include the need for unsubscribe via ngOnDestroy

[ricmello]

@argupta23 this is a common behaviour when working with RxJs observables. It shouldn't be added to docs because is not exclusive to the menu service nor the nebular library.

Many observables needs to be unsubscribed at the end of component lifecycle using ngOnDestroy. See this big thread at stackoverflow.

There is also some libs to unsubscribe from observables without needing ngOnDestroy. Take a look at ngx-auto-unsubscribe and until-destroy.

[argupta23]

@Ricardo-Mello Thanks for the feedback and the pointers.