fix(#2109): tabs query string, loading 1st tab issues

[syedszeeshan]

Before (the change)

After (the change)

-If query string is present, it should be preserved.
-Indicated tab should be honoured.

Make sure that you've checked the boxes below before you submit the PR

• I have read and followed the setup steps
• I have created necessary unit tests
• I have tested the functionality in both React and Angular.

Steps needed to test

Angular playground code

<goa-tabs (_change)="handleTabChange($event)" initialtab="1">
  <goa-tab>
    <div slot="heading">Profile</div>
    <p>
      <b>Profile:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>

  </goa-tab>
  <goa-tab>
    <div slot="heading">
      Review pending
      <goa-badge type="important" content="1"></goa-badge>
    </div>
    <p>
      <b>Review pending:</b> Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </goa-tab>
  <goa-tab>
    <div slot="heading">
      Completed
      <goa-badge type="midtone" content="1"></goa-badge>
    </div>
    <p>
      <b>Completed:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>New text</p>
  </goa-tab>
  <goa-tab heading="Test 1"> Testing </goa-tab>
</goa-tabs>

import { Component } from "@angular/core";

@Component({
  selector: "abgov-tabs",
  templateUrl: "./tabs.html",
})
export class TabsComponent {

  handleTabChange(event: Event) {
    const customEvent = event as CustomEvent;
    const tabIndex = customEvent.detail.tab;
    console.log(`Tab changed to ${tabIndex}`);
  }
}

[lizhuomeng71]

The function of this issue is verified on react and on angular. One thing we noticed is there are 2 additional line for console.log in the code

[syedszeeshan]

The function of this issue is verified on react and on angular. One thing we noticed is there are 2 additional line for console.log in the code

I will remove those console.log statements and update the PR shortly.
@lizhuomeng71 PR has been updated.

[syedszeeshan]

Hi @kevingauld , I have updated this PR and made changes to the getTabNumberFromHash() method. Can you please test again?

I have added playground code. Thare is a commented code section for the 'tabs within tabs scenario', which is not recommended.... therefore code has been commented out.

[lizhuomeng71]

Hi Team, this issue is verified for react and angular. Tab inside tab is out of scope and not verified, loading first tab, and initial tab is verified

[syedszeeshan]

As discussed in the Dev meeting, we check for the tab indicated in the url (e.g. "/tab-0") one time only.... in the beginning.

[syedszeeshan]

Story-2109-20241203.mp4

[chrisolsen]

I am not 100% sure that the block within the timeout is run when; can you confirm that these tests are run. Because if they are being skipped it is a little bit of a false positive.

[syedszeeshan]

removed the setTimeout and PR updated, good thing is the tests passed.

[chrisolsen]

See comment below as it applies here as well.

[syedszeeshan]

removed the setTimeout and PR updated, good thing is the tests passed.

[chrisolsen]

I still see the setTimeout

[chrisolsen]

Not really needed as the querySelectorAll function will always return either an empty array or one that contains data.

[syedszeeshan]

PR has been updated

[chrisolsen]

For these if conditions it would be easier to understand if these conditions were extracted out to a descriptive var name.

[syedszeeshan]

PR has been updated