feat: add noAutoExpand property to control items expanding (#10317)

Author: web-padawan

packages/side-nav/src/vaadin-side-nav-item.js

@@ -341,6 +341,11 @@ class SideNavItem extends SideNavChildrenMixin(
 
   /** @private */
   __expandParentItems() {
+    const sideNav = this.closest('vaadin-side-nav');
+    if (sideNav && sideNav.noAutoExpand) {
+      return;
+    }
+
     const parentItem = this.__getParentItem();
     if (parentItem) {
       parentItem.__expandParentItems();

packages/side-nav/src/vaadin-side-nav.d.ts

@@ -127,6 +127,15 @@ declare class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(Thema
    */
   location: any;
 
+  /**
+   * Whether to expand parent items of the nested matching item after initial
+   * rendering or navigation. By default, all the parent items are expanded.
+   * Set to true to disable this behavior.
+   *
+   * @attr {boolean} no-auto-expand
+   */
+  noAutoExpand: boolean;
+
   addEventListener<K extends keyof SideNavEventMap>(
     type: K,
     listener: (this: SideNav, ev: SideNavEventMap[K]) => void,

packages/side-nav/src/vaadin-side-nav.js

@@ -150,6 +150,19 @@ class SideNav extends SideNavChildrenMixin(
       location: {
         observer: '__locationChanged',
       },
+
+      /**
+       * Whether to expand parent items of the nested matching item after initial
+       * rendering or navigation. By default, all the parent items are expanded.
+       * Set to true to disable this behavior.
+       *
+       * @attr {boolean} no-auto-expand
+       */
+      noAutoExpand: {
+        type: Boolean,
+        reflectToAttribute: true,
+        value: false,
+      },
     };
   }
 

packages/side-nav/test/side-nav-item.test.js

@@ -196,21 +196,6 @@ describe('side-nav-item', () => {
         await item.updateComplete;
         expect(spy.calledOnce).to.be.true;
       });
-
-      it('should expand parent items when path matches', async () => {
-        item = fixtureSync(`
-          <vaadin-side-nav-item>
-            <vaadin-side-nav-item slot="children">
-                <vaadin-side-nav-item slot="children"></vaadin-side-nav-item>
-            </vaadin-side-nav-item>
-          </vaadin-side-nav-item>
-        `);
-        await nextRender();
-        item._items[0]._items[0].path = '';
-        await item.updateComplete;
-        expect(item.expanded).to.be.true;
-        expect(item._items[0].expanded).to.be.true;
-      });
     });
 
     describe('current item with children', () => {

packages/side-nav/test/side-nav.test.js

@@ -6,21 +6,11 @@ import '../src/vaadin-side-nav.js';
 describe('side-nav', () => {
   let sideNav;
 
-  beforeEach(async () => {
-    sideNav = fixtureSync(`
-      <vaadin-side-nav collapsible>
-        <span slot="label">Main menu</span>
-        <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>
-        <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>
-      </vaadin-side-nav>
-    `);
-    await nextRender();
-  });
-
   describe('custom element definition', () => {
     let tagName;
 
     beforeEach(() => {
+      sideNav = fixtureSync('<vaadin-side-nav></vaadin-side-nav>');
       tagName = sideNav.tagName.toLowerCase();
     });
 
@@ -36,7 +26,15 @@ describe('side-nav', () => {
   describe('collapsing', () => {
     let label;
 
-    beforeEach(() => {
+    beforeEach(async () => {
+      sideNav = fixtureSync(`
+        <vaadin-side-nav collapsible>
+          <span slot="label">Main menu</span>
+          <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>
+          <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>
+        </vaadin-side-nav>
+      `);
+      await nextRender();
       label = sideNav.shadowRoot.querySelector('[part="label"]');
     });
 
@@ -72,4 +70,37 @@ describe('side-nav', () => {
       expect(spy.calledOnce).to.be.true;
     });
   });
+
+  describe('expanding items', () => {
+    let items;
+
+    beforeEach(async () => {
+      sideNav = fixtureSync(`
+        <vaadin-side-nav collapsible>
+          <vaadin-side-nav-item>
+            <vaadin-side-nav-item slot="children">
+              <vaadin-side-nav-item slot="children"></vaadin-side-nav-item>
+            </vaadin-side-nav-item>
+          </vaadin-side-nav-item>
+        </vaadin-side-nav>
+      `);
+      items = sideNav.querySelectorAll('vaadin-side-nav-item');
+      await nextRender();
+    });
+
+    it('should expand parent items when path matches by default', async () => {
+      items[2].path = '';
+      await items[2].updateComplete;
+      expect(items[0].expanded).to.be.true;
+      expect(items[1].expanded).to.be.true;
+    });
+
+    it('should not expand parent items when path matches if noAutoExpand is set to true', async () => {
+      sideNav.noAutoExpand = true;
+      items[2].path = '';
+      await items[2].updateComplete;
+      expect(items[0].expanded).to.be.false;
+      expect(items[1].expanded).to.be.false;
+    });
+  });
 });

packages/side-nav/test/typings/side-nav.types.ts

@@ -43,6 +43,7 @@ sideNav.onNavigate = (event) => {
 };
 
 assertType<any>(sideNav.location);
+assertType<boolean>(sideNav.noAutoExpand);
 
 const sideNavItem: SideNavItem = document.createElement('vaadin-side-nav-item');