Repository navigation
A active does not account for search params #518
Description
Describe the bug
A list of links that are used for filtering content will result in all of them having an active class and all of them having aria-current="page"
<A href="/?example=1">1</A>
<A href="/?example=2">2</A>
<A href="/?example=3">3</A>
The problem is that all 3 links cannot be active here at the same time and aria-current fails to differentiate this difference. The workaround here would be to build a custom A that also takes into account the search params.
Your Example Website or App
https://stackblitz.com/edit/solidjs-templates-hhpgedwq?file=src%2FApp.tsx
Steps to Reproduce the Bug or Issue
- Create multiple links that update search params
- See all are considered active and all have an invalid
aria-current
Expected behavior
Some way to force active to account for the search params
Screenshots or Videos
No response
Platform
- OS: macOS
- Browser: Chrome
- Version: 132
Additional context
No response
Activity
ryansolid commentedon Mar 3, 2025
Search query parameters are tricky in that they aren't generally mutually exclusive. I see in this example using the same query paramter they are. But speaking more generally under what conditions do they match or not match? Is it if it is a complete match? Do you do it on partial matches? I wasn't sure so never implemented it. I'm gathering partial matching would be considered the same? Maybe it needs to be configurable by option? I'd be interested in prior art here.
Akkuma commentedon Mar 3, 2025
I checked against tanstack router and it has several options to help support this https://tanstack.com/router/latest/docs/framework/react/guide/navigation#active-options. It defaults to specifically checking the search and every property defined in the search object must match. If you want to explicitly exclude props from triggering the active state if it is a partial match you must use
explicitUndefinedand mark the prop asundefinedin the search object.TLDR: Search works OOTB intuitively and you blacklist props you want to prevent from being considered a match.
Demo: https://stackblitz.com/edit/tanstack-router-rhftaozp?file=src%2Fmain.tsx