fix: fix expanding sidenav item that has no value

Also, make the top level sidenav items in the docs expanded by default
adobe · Jan 7, 2020 · b28cdac · b28cdac
1 parent 8ccfbec
commit b28cdac
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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);
+    });
 });