SIGN IN SIGN UP

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

0 0 107 TypeScript

fix(tabs): preserve query params and fragment from tab button href (#31154)

Issue number: resolves #25470

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
When an `<ion-tab-button>` declares an `href` with a query string or
fragment, activating the tab drops both. In Angular, `IonTabs.select`
navigates to `tabsPrefix/tab` and never reads the button's `href`. In
Vue, the router splits the path on `?` and discards everything after it,
and `IonTabBar` compares the raw href against the pathname so a tab with
query params never shows as selected. In React, this issue has been
fixed as part of the RR6 migration.

## What is the new behavior?
Tab activation forwards the `href`'s query and fragment as navigation
extras. A saved view's previously-captured extras still win when
re-selecting a tab with prior history, so mid-stack state isn't
clobbered. `IonTabBar`'s selection check now compares pathnames only, so
a tab with a query string still highlights when its pathname is active.

Added Playwright coverage in `@ionic/angular` and Cypress coverage in
`@ionic/vue` for first visit, switching tabs, switching back, and
re-clicking the active tab. The Vue tests will cause a conflict on
merging into major-9.0, but I volunteer to fix that issue when it comes
up.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

Preview pages:
- Angular:
https://ionic-framework-git-fw-7146-ionic1.vercel.app/angular/standalone/tabs-search-params/tab1?foo=bar
- Vue:
https://ionic-framework-git-fw-7146-ionic1.vercel.app/vue/tabs-search-params/tab1?foo=bar
- React: This was fixed in the RR6 migration in V9. Unfortunately this
won't be coming to 8.8 at this time.
S
Shane committed
0182bba06d6171dd2faf80556fd2131abf03fa93
Parent: c88c0de
Committed by GitHub <noreply@github.com> on 5/20/2026, 8:03:45 PM