From b04ae1804366509347d000da08e5a7151103ef4b Mon Sep 17 00:00:00 2001
From: Boris Diakur <borisdiakur@gmail.com>
Date: Sun, 9 Oct 2022 22:00:19 +0200
Subject: [PATCH] fix(ld-sidenav): dispatch collapsed change event on
 collapsible change

---
 .../components/ld-sidenav/ld-sidenav.tsx      |  1 +
 .../ld-sidenav/test/ld-sidenav.spec.ts        | 20 +++++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/liquid/components/ld-sidenav/ld-sidenav.tsx b/src/liquid/components/ld-sidenav/ld-sidenav.tsx
index 2d8ef92d27..06b8f79c68 100644
--- a/src/liquid/components/ld-sidenav/ld-sidenav.tsx
+++ b/src/liquid/components/ld-sidenav/ld-sidenav.tsx
@@ -166,6 +166,7 @@ export class LdSidenav {
   updateFullyCollapsible() {
     this.fullyCollapsible =
       this.collapsible && (!this.narrow || !this.activeSubnavContainsIcons())
+    if (!this.collapsible) this.collapsed = false
   }
 
   @Listen('click', {
diff --git a/src/liquid/components/ld-sidenav/test/ld-sidenav.spec.ts b/src/liquid/components/ld-sidenav/test/ld-sidenav.spec.ts
index f8859c8f28..1bb744ed6c 100644
--- a/src/liquid/components/ld-sidenav/test/ld-sidenav.spec.ts
+++ b/src/liquid/components/ld-sidenav/test/ld-sidenav.spec.ts
@@ -1908,4 +1908,24 @@ describe('ld-sidenav', () => {
       )
     }
   })
+
+  it('dispatches collapsed change event on collapsible change', async () => {
+    const page = await newSpecPage({
+      components: sidenavComponents,
+      html: '<ld-sidenav collapsible collapsed />',
+    })
+    const handler = jest.fn()
+    window.addEventListener('ldSidenavCollapsedChange', handler)
+
+    const ldSidenav = page.body.querySelector('ld-sidenav')
+
+    expect(ldSidenav).toHaveClass('ld-sidenav--collapsible')
+    expect(handler).not.toHaveBeenCalled()
+
+    ldSidenav.removeAttribute('collapsible')
+    await page.waitForChanges()
+
+    expect(ldSidenav).not.toHaveClass('ld-sidenav--collapsible')
+    expect(handler).toHaveBeenCalled()
+  })
 })