From b28cdacf3b8a5d5676af57a47f3d9d8c6d4b876e Mon Sep 17 00:00:00 2001
From: Michael Taylor <mitaylor@adobe.com>
Date: Tue, 7 Jan 2020 16:36:10 +1300
Subject: [PATCH] fix: fix expanding sidenav item that has no value

Also, make the top level sidenav items in the docs expanded by default
---
 documentation/src/components/side-nav.ts   |  4 ++-
 packages/sidenav/src/sidenav-item.ts       |  4 +--
 packages/sidenav/test/sidenav-item.test.ts | 39 ++++++++++++++++++++++
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/documentation/src/components/side-nav.ts b/documentation/src/components/side-nav.ts
index 3055e0832b..7d7d7b6f76 100644
--- a/documentation/src/components/side-nav.ts
+++ b/documentation/src/components/side-nav.ts
@@ -73,9 +73,10 @@ class SideNav extends LitElement {
                     </div>
                 </div>
                 <div id="navigation">
-                    <sp-sidenav variant="multilevel">
+                    <sp-sidenav manage-tab-index variant="multilevel">
                         <sp-sidenav-item
                             label="Components"
+                            expanded
                             @sidenav-select=${this.handleComponentSelect}
                         >
                             ${this.components.map(
@@ -90,6 +91,7 @@ class SideNav extends LitElement {
                         </sp-sidenav-item>
                         <sp-sidenav-item
                             label="Contributing"
+                            expanded
                             @sidenav-select=${this.handleGuideSelect}
                         >
                             <sp-sidenav-item
diff --git a/packages/sidenav/src/sidenav-item.ts b/packages/sidenav/src/sidenav-item.ts
index e5f4e70e38..a851b69c04 100644
--- a/packages/sidenav/src/sidenav-item.ts
+++ b/packages/sidenav/src/sidenav-item.ts
@@ -91,10 +91,10 @@ export class SideNavItem extends Focusable {
         if (!this.href && event) {
             event.preventDefault();
         }
-        if (this.value && !this.disabled) {
+        if (!this.disabled) {
             if (this.hasChildren) {
                 this.expanded = !this.expanded;
-            } else {
+            } else if (this.value) {
                 const selectDetail: SidenavSelectDetail = {
                     value: this.value,
                 };
diff --git a/packages/sidenav/test/sidenav-item.test.ts b/packages/sidenav/test/sidenav-item.test.ts
index ec3122a13b..bde9211889 100644
--- a/packages/sidenav/test/sidenav-item.test.ts
+++ b/packages/sidenav/test/sidenav-item.test.ts
@@ -49,4 +49,43 @@ describe('Sidenav Item', () => {
 
         expect(selected).to.be.true;
     });
+
+    it('clicking expands a sidenav item with children', async () => {
+        const el = await fixture<SideNavItem>(
+            html`
+                <sp-sidenav-item>
+                    <sp-sidenav-item
+                        value="Section 1"
+                        label="Section 1"
+                    ></sp-sidenav-item>
+                    <sp-sidenav-item
+                        value="Section 2"
+                        label="Section 2"
+                    ></sp-sidenav-item>
+                </sp-sidenav-item>
+            `
+        );
+
+        await elementUpdated(el);
+
+        expect(el.shadowRoot).to.exist;
+        if (!el.shadowRoot) return;
+
+        let slot = el.shadowRoot.querySelector('slot');
+        expect(slot).not.to.exist;
+
+        expect(el.expanded).to.be.false;
+
+        el.click();
+
+        await elementUpdated(el);
+
+        expect(el.expanded).to.be.true;
+
+        slot = el.shadowRoot.querySelector('slot');
+        expect(slot).to.exist;
+        if (!slot) return;
+
+        expect(slot.assignedElements().length).to.equal(2);
+    });
 });