universal-ember
Route Nesting *Potentially* Breaks Active State Behavior
When linking to the index route in a route tree the active state behavior is a bit unclear. In navs it would be common to have data-active show when any child route for a section is active. However since the current Link implementation resolves the parent-route.index route for a given href this is not the case.
I say that this behavior is "potentially" broken because I think this is a good case for an arg that would configure this behavior per Link. For instance if you're building a pill section where the index shouldn't be active when a user goes to the parent-route/edit url, then having a way to opt out should be available.
For this and some other reasons our app has had to reimplement Link and when finding this I've added an arg @indexRoutesSetActive and had this default to false. And have roughly the following logic:
get isActive() {
let routeInfo = this.routerService.recognizeRoute(this.args.href);
if (routeInfo) {
const routeName =
this.args.indexRoutesSetActive && routeInfo.localName === 'index'
? routeInfo.parent?.name ?? routeInfo.name
: routeInfo.name;
return this.routerService.isActive(routeName);
}
return false;
}
Naming is a bit tricky and deciding default true/false value for @indexRoutesSetActive is a potential breaking change
Other considerations
-
indexis the defaultpath: /but applications may not keep to this convention.RouteInfodoes not seem to have a simple public API to know if a RouteInfo value is the default route for a given route tree or not (you could work this out by usingurlForwith the current route and the parent route, which feels a bit :( but may be what is required
how do you feel about maybe @activeOnSubPaths={{false}}?
which would mean that
- foo/index <- implied
foo/, thus active - foo/bar <- not active because /bar is a subpath of foo/
I think this could apply to application and application.index as well
