Skip to content

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

Merged
ShaneK merged 3 commits into
mainfrom
FW-7146
May 20, 2026
Merged

ShaneK merged 3 commits into
mainfrom
FW-7146

Conversation

@ShaneK

@ShaneK ShaneK commented May 19, 2026 •

Copy link
Copy Markdown
Member

Issue number: resolves #25470


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
  • No

Other information

Preview pages:

@ShaneK
ShaneK requested a review from a team as a code owner May 19, 2026 15:43
@ShaneK
ShaneK requested a review from thetaPC May 19, 2026 15:43
@vercel

vercel Bot commented May 19, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment May 20, 2026 7:20pm

Request Review

@github-actions github-actions Bot added package: angular @ionic/angular package package: vue @ionic/vue package labels May 19, 2026

@thetaPC thetaPC left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@thetaPC

thetaPC commented May 20, 2026

Copy link
Copy Markdown
Contributor

Suggestion: Creating tests to verify /a?x=1&y=2#section and /a?q=hello%20world will work.

@ShaneK
ShaneK added this pull request to the merge queue May 20, 2026
Merged via the queue into main with commit 0182bba May 20, 2026
95 of 97 checks passed
@ShaneK
ShaneK deleted the FW-7146 branch May 20, 2026 20:18
HappyKnuckles pushed a commit to HappyKnuckles/ionic-framework that referenced this pull request Oct 3, 2026
…onic-team#31154)

Issue number: resolves ionic-team#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.

This branch was successfully deployed

1 active deployment
Preview — f4e7f581 Deployed May 20, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: angular @ionic/angular package package: vue @ionic/vue package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: angular/react/vue, cannot set query param on tab buttons

2 participants