Bug in ix-menu-about when rapidly changing tabs with a lot of data

[TDaniel-evo]

What happened?

I have an ix-menu-about component inside an ix-menu. It has three tabs (three ix-menu-about-item). Two of the three tab's content is the content of a separate HTML file. I rapidly changing tabs a few times by clicking on the tabs and then stop clicking but the tab changing continues on it's own and I can't stop it.

What type of frontend frameware are you seeing the problem on?

Angular

Which version of iX do you use?

2.0.3

Code to produce this issue.

export class MenuAboutComponent implements OnInit {
  aimmOssHtml: SafeHtml
  aimmDocOssHtml: SafeHtml

  constructor(private readonly http: HttpClient,
              private readonly sanitizer: DomSanitizer) {
  }

  ngOnInit() {
    this.loadDocs()
  }

  private loadDocs() {
    const sources = Object.keys(OssFileNames).map(fileName =>
      this.http.get(`${environment.pathPrefix}/assets/docs/oss/${OssFileNames[fileName]}`, { responseType: 'text' }),
    )
    // these are trusted html, so we can safely bypass security and sonar
    forkJoin(sources).subscribe(([aimmHtml, aimmDocumentationHtml]) => {
      this.aimmOssHtml = this.sanitizer.bypassSecurityTrustHtml(aimmHtml) // NOSONAR
      this.aimmDocOssHtml = this.sanitizer.bypassSecurityTrustHtml(aimmDocumentationHtml) // NOSONAR
    })
  }
}

template:
<ix-menu-about-item label="Imprint" id="menuAboutImprint">
  /* some content */
</ix-menu-about-item>
<ix-menu-about-item label="AI Model Manager licenses" id="menuAboutAimmLicence">
  <div [innerHtml]="aimmOssHtml"></div>
</ix-menu-about-item>
<ix-menu-about-item label="Function Manual licenses" id="menuAboutAimmDocLicence">
  <div [innerHtml]="aimmDocOssHtml"></div>
</ix-menu-about-item>

[matthiashader]

Could you please provide the whole code? I can't reproduce it with the provided code.

[TDaniel-evo]

Unfortunately I don't have a proper screen recorder so I could only record it with my phone but the glitch is visible around 0:22. You need to change tabs really fast and even then it's not always happening.
https://siemens-my.sharepoint.com/:v:/g/personal/daniel_tahin_evosoft_com/EbgaYV2m3stFmVDOoLDBgh4BzHjKiOSTEiDybHYJsT93tw?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0RpcmVjdCJ9fQ&e=U064Yq

I'm using MenuAboutComponent inside the AppComponent. Here is the template of the AppComponent:

<ix-basic-navigation application-name="myApp" forceBreakpoint="md">
  <div class="placeholder-logo" slot="logo">
    <img src="assets/icons/siemens.svg" alt="logo" />
  </div>
  <ix-menu i18nLegal="{{'menuAboutTitle' | translate}}">
    <ix-menu-avatar
      [top]="(userInfoCache$ | async)?.email"
      [bottom]="(userInfoCache$ | async)?.roles"
    ></ix-menu-avatar>
    <ix-menu-item
      id="menuItemDeploymentOverview"
      icon="report-barchart"
      routerLink="/deployment"
      active="{{location.href.includes('/deployment')}}"
    >
      {{ "deploymentOverviewHeader" | translate }}
    </ix-menu-item>
    <ix-menu-item
      id="menuItemWorkspaceArea"
      icon="capacity"
      routerLink="/workspace"
      active="{{location.href.includes('/workspace')}}"
    >
      {{ "workspaceAreaHeader" | translate }}
    </ix-menu-item>
    <ix-menu-item
      id="menuItemDeviceOverview"
      icon="controller-device"
      routerLink="/devices"
      active="{{location.href.includes('/devices')}}"
    >
      {{ "deviceOverviewHeader" | translate }}
    </ix-menu-item>

    <ix-menu-item
      id="menuItemIemConnect"
      slot="bottom"
      [icon]="(iemService.isLoggedIn() | async) ? 'connected' : 'disconnected'"
      (click)="openIemConnectModal()"
      (keydown.enter)="openIemConnectModal()"
    >
      {{((iemService.isLoggedIn() | async) ? 'iemLoginOnline' : 'iemLoginNotConnected') |
      translate}}
    </ix-menu-item>
    <ix-menu-item
      id="menuItemLangSelect"
      icon="globe"
      slot="bottom"
      #triggerLanguageSelector
      >{{ translator.currentLocal | async | translate }}</ix-menu-item
    >
    <ix-dropdown [ixDropdownTrigger]="triggerLanguageSelector" placement="right-end">
      <ix-dropdown-item
        *ngFor="let locale of translator.supportedLocales"
        label="{{ locale | translate }}"
        (click)="translator.locale = locale"
        (keydown.enter)="translator.locale = locale"
      ></ix-dropdown-item>
    </ix-dropdown>
    <ix-menu-item id="menuItemHelp" icon="question" slot="bottom" #triggerHelpMenu
      >{{ "headerHelp" | translate }}</ix-menu-item
    >
    <ix-dropdown [ixDropdownTrigger]="triggerHelpMenu" placement="right-end">
      <ix-dropdown-item
        icon="open-external"
        (click)="open('userDoc')"
        (keydown.enter)="open('userDoc')"
        label="{{ 'headerHelpDocumentation' | translate }}"
      ></ix-dropdown-item>
      <ix-dropdown-item
        icon="open-external"
        (click)="open('publicApi')"
        (keydown.enter)="open('publicApi')"
        label="{{ 'headerHelpPublicAPI' | translate }}"
      ></ix-dropdown-item>
      <ix-dropdown-item
        icon="open-external"
        (click)="open('cloudApi')"
        (keydown.enter)="open('cloudApi')"
        label="{{ 'headerHelpCloudAPI' | translate }}"
      ></ix-dropdown-item>
      <ix-dropdown-item
        icon="open-external"
        (click)="open('azureApi')"
        (keydown.enter)="open('azureApi')"
        label="{{ 'headerHelpAzureDeliveryAPI' | translate }}"
      ></ix-dropdown-item>
      <ix-dropdown-item
        icon="open-external"
        (click)="open('awsApi')"
        (keydown.enter)="open('awsApi')"
        label="{{ 'headerHelpAWSDeliveryAPI' | translate }}"
      ></ix-dropdown-item>
    </ix-dropdown>
    <ix-menu-about
      id="menuItemAbout"
      label="{{ 'menuAboutTitle' | translate }}"
      active-tab-label="Imprint"
    >
      <app-menu-about></app-menu-about>
    </ix-menu-about>
  </ix-menu>
  <div class="routerContent">
    <router-outlet></router-outlet>
  </div>
</ix-basic-navigation>