diff --git a/packages/sidenav/src/SidenavItem.ts b/packages/sidenav/src/SidenavItem.ts index 8225cf3f46..98ca5109d9 100644 --- a/packages/sidenav/src/SidenavItem.ts +++ b/packages/sidenav/src/SidenavItem.ts @@ -77,7 +77,8 @@ export class SideNavItem extends LikeAnchor(Focusable) { if (!this.href && event) { event.preventDefault(); } - if (!this.disabled) { + // With an `href` this click will change the page contents, not toggle its children or become "selected". + if (!this.disabled && (!this.href || event?.defaultPrevented)) { if (this.hasChildren) { this.expanded = !this.expanded; } else if (this.value) { diff --git a/projects/documentation/content/_includes/partials/sidenav.njk b/projects/documentation/content/_includes/partials/sidenav.njk index 6cc2d16621..b34eb197d2 100644 --- a/projects/documentation/content/_includes/partials/sidenav.njk +++ b/projects/documentation/content/_includes/partials/sidenav.njk @@ -29,6 +29,7 @@ href="{{ componentRoot.url }}" value="{{ componentRoot.data.componentName }}" {% if componentPackage === componentRoot.data.componentName %}expanded{% endif %} + {% if value === componentRoot.data.componentName %}autofocus{% endif %} > {{ componentRoot.data.displayName }} {% for componentChild in collections[componentRoot.data.componentName + '-children'] %} @@ -36,6 +37,7 @@ label="{{ componentChild.data.displayName }}" href="{{ componentChild.url }}" value="{{ componentChild.data.componentName }}" + {% if value === componentChild.data.componentName %}autofocus{% endif %} > {{ componentChild.data.displayName }}