fix(angular): nested tabs now go to correct page

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue Number: resolves #23897

Each tabs instance listens for ionTabButtonClick, so if you click a tab button in a child tabs instance, the parent tabs instance will also see that event and try to navigate. But since the event was really only meant for the child tab, the parent tab will try to navigate to a non-existent route.

What is the new behavior?

• When a tabs instance gets the ionTabButtonClick event it will prevent the event from bubbling so any tabs higher up do not also receive this event and navigate to the wrong url

Does this introduce a breaking change?

• Yes
• No

Other information

[kirillgroshkov]

FYI this broke our app. Also, it's inconsistent with the documentation: https://ionicframework.com/docs/api/tabs

Docs say that argument of select can be string. But in this PR (and in released 5.8.0) it only accepts CustomEvent and breaks if you pass string as any to it.

We'll temporary pin to 5.7.0 until it's fixed.

[liamdebeasi]

See #23952. We have a proposed fix in #23952 (comment). It would be really helpful if you could test the dev build and let us know if it fixes the issue. Thanks!

[liamdebeasi]

Also the methods you see on the docs are for the vanilla JS ion-tabs component, not the ion-tabs component in Angular (Yes it is confusing). We are working on addressing this inconsistency in #19918, but the select method not working with HTMLIonTabElement in Angular is not an issue caused by this PR.

[kirillgroshkov]

See #23952. We have a proposed fix in #23952 (comment). It would be really helpful if you could test the dev build and let us know if it fixes the issue. Thanks!

I unfortunately don't have time to test it, but looking at the PR code I expect that it'll fix it 👍