fix(sidenav): prevent items with hrefs from toggling expanded or sele…

…ction
adobe · Jan 19, 2023 · 7ff4920 · 7ff4920
1 parent 3750fc2
commit 7ff4920
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git 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
@@ -29,13 +29,15 @@
                 href="{{ componentRoot.url }}"
                 value="{{ componentRoot.data.componentName }}"
                 {% if componentPackage === componentRoot.data.componentName %}expanded{% endif %}
+                {% if value === componentRoot.data.componentName %}autofocus{% endif %}
             >
                 <a href="{{ componentRoot.url }}" slot="no-js">{{ componentRoot.data.displayName }}</a>
                 {% for componentChild in collections[componentRoot.data.componentName + '-children'] %}
                     <sp-sidenav-item
                         label="{{ componentChild.data.displayName }}"
                         href="{{ componentChild.url }}"
                         value="{{ componentChild.data.componentName }}"
+                        {% if value === componentChild.data.componentName %}autofocus{% endif %}
                     >
                         <a href="{{ componentChild.url }}" slot="no-js">{{ componentChild.data.displayName }}</a>
                     </sp-sidenav-item>